@nok-integration/storefront-react 0.20.16 → 0.21.0

package/dist/index.mjs

@@ -4491,6 +4491,80 @@ function requireIds() {
   ids.RequestId = prefixedId("req_");
   return ids;
 }
+var vip = {};
+var hasRequiredVip;
+function requireVip() {
+  if (hasRequiredVip) return vip;
+  hasRequiredVip = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    exports.VipClaimResponse = exports.VipClaimRefusalReason = exports.VipClaimRequest = exports.VipClaimLine = exports.VipCartItemRequest = exports.VipInviteView = exports.VipHero = exports.VipInviteOffer = exports.VipInviteResolveRequest = exports.VipDeliveryRule = exports.VIP_TOKEN_PATTERN = exports.VipInviteRef = void 0;
+    const zod_1 = requireZod();
+    const common_1 = requireCommon();
+    const ids_1 = requireIds();
+    exports.VipInviteRef = (0, ids_1.prefixedId)("vip_", "VipInviteRef");
+    exports.VIP_TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
+    exports.VipDeliveryRule = zod_1.z.enum(["both_free", "standard_free", "both_paid"]);
+    exports.VipInviteResolveRequest = zod_1.z.object({
+      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN)
+    }).strict();
+    exports.VipInviteOffer = zod_1.z.object({
+      product_sku: common_1.Sku,
+      quantity: zod_1.z.number().int().positive()
+    });
+    exports.VipHero = zod_1.z.object({
+      image: common_1.Url.nullable(),
+      headline: zod_1.z.string(),
+      body: zod_1.z.string().nullable(),
+      cta_label: zod_1.z.string()
+    });
+    exports.VipInviteView = zod_1.z.discriminatedUnion("state", [zod_1.z.object({
+      state: zod_1.z.literal("active"),
+      invite_ref: exports.VipInviteRef,
+      recipient_name: zod_1.z.string(),
+      personal_message: zod_1.z.string().nullable(),
+      delivery_rule: exports.VipDeliveryRule,
+      expires_at: common_1.Timestamp,
+      items: zod_1.z.array(exports.VipInviteOffer).min(1),
+      hero: exports.VipHero.nullable().optional()
+    }), zod_1.z.object({
+      state: zod_1.z.literal("scheduled"),
+      opens_at: common_1.Timestamp
+    }), zod_1.z.object({
+      state: zod_1.z.literal("claimed")
+    }), zod_1.z.object({
+      state: zod_1.z.literal("expired")
+    }), zod_1.z.object({
+      state: zod_1.z.literal("revoked")
+    })]);
+    exports.VipCartItemRequest = zod_1.z.object({
+      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN),
+      sku: common_1.Sku,
+      qty: zod_1.z.number().int().positive().max(99)
+    }).strict();
+    exports.VipClaimLine = zod_1.z.object({
+      sku: common_1.Sku,
+      qty: zod_1.z.number().int().positive()
+    }).strict();
+    exports.VipClaimRequest = zod_1.z.object({
+      invite_ref: exports.VipInviteRef,
+      dazn_user_id: zod_1.z.string().min(1).max(200),
+      lines: zod_1.z.array(exports.VipClaimLine).min(1).max(50)
+    }).strict();
+    exports.VipClaimRefusalReason = zod_1.z.enum(["unknown", "revoked", "expired", "not_yet_valid", "claimed_by_another", "already_ordered", "outside_entitlement"]);
+    exports.VipClaimResponse = zod_1.z.discriminatedUnion("result", [zod_1.z.object({
+      result: zod_1.z.literal("claimed"),
+      invite_ref: exports.VipInviteRef
+    }), zod_1.z.object({
+      result: zod_1.z.literal("refused"),
+      invite_ref: exports.VipInviteRef,
+      reason: exports.VipClaimRefusalReason
+    })]);
+  })(vip);
+  return vip;
+}
 var hasRequiredCart;
 function requireCart() {
   if (hasRequiredCart) return cart;
@@ -4505,6 +4579,7 @@ function requireCart() {
     const ids_1 = requireIds();
     const money_2 = requireMoney();
     const common_1 = requireCommon();
+    const vip_1 = requireVip();
     exports.CartItem = zod_1.z.object({
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive(),
@@ -4537,7 +4612,10 @@ function requireCart() {
       totals: exports.CartTotals,
       locked: exports.CartLock.optional(),
       hold: exports.CartHold.optional(),
-      hidden_lines: zod_1.z.array(exports.HiddenSummaryLine).optional()
+      hidden_lines: zod_1.z.array(exports.HiddenSummaryLine).optional(),
+      vip: zod_1.z.object({
+        invite_ref: vip_1.VipInviteRef
+      }).optional()
     });
     exports.CartMarketQuery = common_1.MarketQuery;
     exports.AddCartItemRequest = zod_1.z.object({
@@ -4563,7 +4641,8 @@ function requireCart() {
       items: zod_1.z.array(exports.CartItem),
       cart_items: zod_1.z.array(exports.PartnerCartItem),
       totals: exports.CartTotals,
-      locked: exports.CartLock.optional()
+      locked: exports.CartLock.optional(),
+      vip_invite_ref: vip_1.VipInviteRef.optional()
     });
   })(cart);
   return cart;
@@ -4620,6 +4699,7 @@ function requireOrders() {
     const money_1 = requireMoney();
     const ids_1 = requireIds();
     const common_1 = requireCommon();
+    const vip_1 = requireVip();
     exports.OrderEventEnvelope = zod_1.z.object({
       event_id: ids_1.EventId,
       occurred_at: common_1.Timestamp
@@ -4658,7 +4738,8 @@ function requireOrders() {
       ship_to: common_1.Address,
       lines: zod_1.z.array(exports.OrderLine).min(1),
       totals: exports.OrderTotals,
-      payment: exports.OrderPaymentSummary.optional()
+      payment: exports.OrderPaymentSummary.optional(),
+      vip_invite_ref: vip_1.VipInviteRef.optional()
     }).strict();
     exports.CancelReason = zod_1.z.enum(["customer_request", "payment_failed", "fraud", "unfulfillable", "other"]);
     exports.OrderLineAction = zod_1.z.object({
@@ -4701,6 +4782,7 @@ function requireOrderTracking() {
     const ids_1 = requireIds();
     const common_1 = requireCommon();
     const orders_1 = requireOrders();
+    const vip_1 = requireVip();
     exports.OrderProgressStep = zod_1.z.enum(["packing", "on_its_way", "out_for_delivery", "delivered", "cancelled"]);
     exports.OrderProgressEntry = zod_1.z.object({
       step: exports.OrderProgressStep,
@@ -4780,7 +4862,10 @@ function requireOrderTracking() {
       totals: orders_1.OrderTotals,
       can_cancel: zod_1.z.boolean().optional(),
       can_return: zod_1.z.boolean().optional(),
-      returns: zod_1.z.array(exports.ReturnSummary).optional()
+      returns: zod_1.z.array(exports.ReturnSummary).optional(),
+      vip: zod_1.z.object({
+        invite_ref: vip_1.VipInviteRef
+      }).optional()
     });
     exports.FanCancelReason = zod_1.z.enum(["changed_my_mind", "ordered_by_mistake", "delivery_too_long"]);
     exports.RequestCancellationRequest = zod_1.z.object({
@@ -4891,7 +4976,7 @@ function requireErrors() {
     });
     exports.ErrorResponse = exports.ApiErrorBody = exports.ERROR_CODE_STATUS = exports.ErrorCode = void 0;
     const zod_1 = requireZod();
-    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
+    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
     exports.ERROR_CODE_STATUS = {
       invalid_request: 400,
       unauthorized: 401,
@@ -4905,6 +4990,9 @@ function requireErrors() {
       order_not_cancellable: 409,
       cart_not_found: 404,
       support_ticket_not_found: 404,
+      vip_invite_not_found: 404,
+      vip_cart_conflict: 409,
+      vip_invite_mismatch: 409,
       size_chart_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
@@ -4941,6 +5029,7 @@ function requireClient() {
   const order_tracking_1 = requireOrderTracking();
   const stock_alerts_1 = requireStockAlerts();
   const support_1 = requireSupport();
+  const vip_1 = requireVip();
   const errors_1 = requireErrors();
   class DaznApiError extends Error {
     status;
@@ -5170,6 +5259,24 @@ function requireClient() {
           schema: support_1.SupportTicket
         })
       },
+      vip: {
+        resolve: (token, query = {}) => request({
+          method: "POST",
+          path: "/vip/resolve",
+          body: {
+            token
+          },
+          query: market(query),
+          schema: vip_1.VipInviteView
+        }),
+        addToCart: (body3, query = {}) => request({
+          method: "POST",
+          path: "/vip/cart/items",
+          body: body3,
+          query: market(query),
+          schema: cart_1.Cart
+        })
+      },
       auth: {
         exchangeSession: (body3) => request({
           method: "POST",
@@ -5189,6 +5296,60 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+const TOP = {
+  doc: 0,
+  pane: 0
+};
+const places = /* @__PURE__ */ new Map();
+let returnedTo = null;
+function here() {
+  if (typeof window === "undefined") return "";
+  const { pathname, search, hash } = window.location;
+  return pathname + search + hash;
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("popstate", () => {
+    returnedTo = here();
+  }, {
+    capture: true
+  });
+}
+function cameBack() {
+  return returnedTo !== null && returnedTo === here();
+}
+function returnOffset(key) {
+  if (!cameBack() || returnedTo !== key) return null;
+  return places.get(key) ?? null;
+}
+function settleReturn() {
+  returnedTo = null;
+}
+function remember(key, offset) {
+  places.set(key, offset);
+}
+let latestScreen = 0;
+let currentScreen = 0;
+function claimScreen() {
+  latestScreen += 1;
+  currentScreen = latestScreen;
+  return currentScreen;
+}
+function leaveScreen() {
+  currentScreen = 0;
+  settleReturn();
+}
+function isCurrentScreen(screen2) {
+  return screen2 === currentScreen;
+}
+function placeOf(pane) {
+  return {
+    doc: window.scrollY || document.documentElement.scrollTop || 0,
+    pane: pane ? pane.scrollTop : 0
+  };
+}
+function reached(now, at) {
+  return Math.abs(now.doc - at.doc) <= 1 && Math.abs(now.pane - at.pane) <= 1;
+}
 const HOLD_MS = 2500;
 function withoutRestoration() {
   const history = typeof window !== "undefined" ? window.history : void 0;
@@ -5201,11 +5362,14 @@ function withoutRestoration() {
   };
 }
 function scrollToTop(box2) {
+  scrollToOffset(0, box2);
+}
+function scrollToOffset(offset, box2) {
   const target = box2 ?? document.documentElement;
   const behaviour = target.style.scrollBehavior;
   target.style.scrollBehavior = "auto";
-  if (box2) box2.scrollTop = 0;
-  else window.scrollTo(0, 0);
+  if (box2) box2.scrollTop = offset;
+  else window.scrollTo(0, offset);
   target.style.scrollBehavior = behaviour;
 }
 function scrollerOf(el) {
@@ -5231,17 +5395,20 @@ const holds = /* @__PURE__ */ new Set();
 function releaseHolds() {
   for (const end2 of Array.from(holds)) end2();
 }
-function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+function anchorTop(onMoved = () => true, onEnd, box2 = null, at = TOP) {
   let released = false;
   let touching = false;
   const top2 = () => {
     if (released || touching) return;
     const document_ = window.scrollY || document.documentElement.scrollTop || 0;
     const pane = box2 ? box2.scrollTop : 0;
-    if (document_ <= 0 && pane <= 0) return;
+    const off = (now, want) => want === 0 ? now > 0 : Math.abs(now - want) > 1;
+    const documentOff = off(document_, at.doc);
+    const paneOff = box2 !== null && off(pane, at.pane);
+    if (!documentOff && !paneOff) return;
     if (!onMoved()) return;
-    if (document_ > 0) scrollToTop();
-    if (box2 && pane > 0) scrollToTop(box2);
+    if (documentOff) scrollToOffset(at.doc);
+    if (box2 && paneOff) scrollToOffset(at.pane, box2);
   };
   const down = (event) => {
     if (event.type !== "pointerdown" || event.pointerType === "touch") {
@@ -5321,6 +5488,7 @@ function onResize(el, resized) {
 }
 function anchorToTop() {
   if (typeof window === "undefined") return;
+  leaveScreen();
   const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
@@ -5729,7 +5897,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$S = {
+const styles$T = {
   badge: badge$5,
   neutral: neutral$2,
   success: success$1,
@@ -5738,7 +5906,7 @@ const styles$S = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$S.badge, styles$S[tone]].join(" "),
+    className: [styles$T.badge, styles$T[tone]].join(" "),
     children
   });
 }
@@ -5747,7 +5915,7 @@ const fullWidth = "_fullWidth_ci424_25";
 const primary = "_primary_ci424_29";
 const secondary = "_secondary_ci424_34";
 const ghost = "_ghost_ci424_40";
-const styles$R = {
+const styles$S = {
   button: button$1,
   fullWidth,
   primary,
@@ -5755,12 +5923,12 @@ const styles$R = {
   ghost
 };
 const spinner = "_spinner_1rueh_5";
-const styles$Q = {
+const styles$R = {
   spinner
 };
 function Spinner({ className }) {
   return jsx("span", {
-    className: [styles$Q.spinner, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$R.spinner, className ?? ""].filter(Boolean).join(" "),
     "aria-hidden": "true"
   });
 }
@@ -5769,7 +5937,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$R.button, styles$R[variant], fullWidth2 ? styles$R.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$S.button, styles$S[variant], fullWidth2 ? styles$S.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
@@ -5779,7 +5947,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   });
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$P = {
+const styles$Q = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5790,13 +5958,13 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$P.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$Q.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_stwld_10";
 const fill = "_fill_stwld_35";
-const styles$O = {
+const styles$P = {
   surface: surface$1,
   fill
 };
@@ -5867,22 +6035,62 @@ function useScreenAnchor(ref, enabled = true) {
     if (!el || !enabled) return;
     const restore = withoutRestoration();
     let moved = false;
-    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
-      if (end2 === "moved") moved = true;
-    }, scrollerOf(el));
-    let release = hold();
-    const again = () => {
+    let holding = false;
+    let returning = false;
+    let at = TOP;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
+    const hold = (entered) => {
+      if (entered) {
+        const back = returnOffset(here());
+        returning = back !== null;
+        at = back ?? TOP;
+      }
+      holding = true;
+      return anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+        holding = false;
+        if (end2 === "moved") moved = true;
+        if (returning && end2 === "moved") settle();
+      }, scrollerOf(el), at);
+    };
+    let screen2 = claimScreen();
+    let release = hold(true);
+    const again = (entered) => {
       release();
-      release = hold();
+      release = hold(entered);
     };
     const unobserve = onReveal(el, () => {
       moved = false;
-      again();
+      screen2 = claimScreen();
+      again(true);
     });
     const settled = onResize(el, () => {
-      if (!moved) again();
+      if (!moved) again(false);
+    });
+    const fan = (event) => {
+      if (movesThePage(event)) moved = true;
+    };
+    for (const type of RELEASES) window.addEventListener(type, fan, {
+      passive: true
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(scrollerOf(el));
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
     });
     return () => {
+      for (const type of RELEASES) window.removeEventListener(type, fan);
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       settled();
       unobserve();
       release();
@@ -5903,7 +6111,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$O.surface, fill2 ? styles$O.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$P.surface, fill2 ? styles$P.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -5916,7 +6124,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$N = {
+const styles$O = {
   root: root$6,
   inner,
   media: media$3,
@@ -6179,7 +6387,13 @@ const ES = {
   Less: "Menos",
   more: "más",
   "Close reasons": "Cerrar motivos",
-  Select: "Seleccionar"
+  Select: "Seleccionar",
+  "Claim yours": "Consigue el tuyo",
+  "Sold out": "Agotado",
+  "This invitation can no longer be used.": "Esta invitación ya no se puede usar.",
+  "Invitation unavailable": "Invitación no disponible",
+  "Your basket has other items": "Tu cesta tiene otros artículos",
+  "Empty your basket to claim this item.": "Vacía tu cesta para conseguir este artículo."
 };
 const CATALOGUES = {
   es: ES
@@ -6209,36 +6423,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$N.root,
+    className: styles$O.root,
     children: jsx("div", {
-      className: styles$N.inner,
+      className: styles$O.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$N.media
+          className: styles$O.media
         }), jsxs("div", {
-          className: styles$N.lines,
+          className: styles$O.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$N.lineWide
+            className: styles$O.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$N.lineMid
+            className: styles$O.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$N.lineNarrow
+            className: styles$O.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$N.action
+          className: styles$O.action
         })]
       }) : jsx("div", {
-        className: styles$N.lines,
+        className: styles$O.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$N.row
+          className: styles$O.row
         }, i))
       })
     })
@@ -6246,36 +6460,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
 }
 const root$5 = "_root_ryf3q_6";
 const icon$4 = "_icon_ryf3q_15";
-const text$5 = "_text_ryf3q_21";
+const text$6 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
-const body$8 = "_body_ryf3q_40";
+const body$9 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$M = {
+const styles$N = {
   root: root$5,
   icon: icon$4,
-  text: text$5,
+  text: text$6,
   title: title$n,
-  body: body$8,
+  body: body$9,
   action: action$1
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$M.root,
+    className: styles$N.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$M.icon,
+      className: styles$N.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$M.text,
+      className: styles$N.text,
       children: [jsx("h2", {
-        className: styles$M.title,
+        className: styles$N.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$M.body,
+        className: styles$N.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$M.action,
+      className: styles$N.action,
       children: action2
     })]
   });
@@ -6332,6 +6546,16 @@ const TREATMENTS = {
     body: "This order was already confirmed.",
     retriable: false
   },
+  vip_invite_not_found: {
+    title: "Invitation unavailable",
+    body: "This invitation can no longer be used.",
+    retriable: false
+  },
+  vip_cart_conflict: {
+    title: "Your basket has other items",
+    body: "Empty your basket to claim this item.",
+    retriable: false
+  },
   rate_limited: {
     title: "One moment",
     body: "Too many requests. Retrying shortly.",
@@ -6357,6 +6581,11 @@ const TREATMENTS = {
     body: "This order has already been despatched.",
     retriable: false
   },
+  vip_invite_mismatch: {
+    title: "Invitation unavailable",
+    body: "This invitation can no longer be used.",
+    retriable: false
+  },
   forbidden: {
     title: "Not available to you",
     body: "You do not have access to this.",
@@ -6396,24 +6625,24 @@ function isDuplicateOrder(err) {
 }
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
-const body$7 = "_body_1lbpx_15";
-const styles$L = {
+const body$8 = "_body_1lbpx_15";
+const styles$M = {
   root: root$4,
   title: title$m,
-  body: body$7
+  body: body$8
 };
 function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const t = useT();
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$L.root,
+    className: styles$M.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$L.title,
+      className: styles$M.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$L.body,
+      className: styles$M.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -6451,7 +6680,7 @@ const viewport = "_viewport_oz4st_14";
 const anchor = "_anchor_oz4st_41";
 const caret = "_caret_oz4st_59";
 const toast = "_toast_oz4st_82";
-const text$4 = "_text_oz4st_111";
+const text$5 = "_text_oz4st_111";
 const message$1 = "_message_oz4st_120";
 const action = "_action_oz4st_133";
 const neutral$1 = "_neutral_oz4st_158";
@@ -6461,12 +6690,12 @@ const rich = "_rich_oz4st_183";
 const description = "_description_oz4st_198";
 const thumb$3 = "_thumb_oz4st_216";
 const thumbImage = "_thumbImage_oz4st_227";
-const styles$K = {
+const styles$L = {
   viewport,
   anchor,
   caret,
   toast,
-  text: text$4,
+  text: text$5,
   message: message$1,
   action,
   neutral: neutral$1,
@@ -6584,41 +6813,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$K.viewport,
+      className: styles$L.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$K.anchor,
+          className: styles$L.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$K.caret,
+            className: styles$L.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$K.toast, rich2 ? styles$K.rich : styles$K[t.tone]].join(" "),
+            className: [styles$L.toast, rich2 ? styles$L.rich : styles$L[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$K.thumb,
+              className: styles$L.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$K.thumbImage
+                className: styles$L.thumbImage
               })
             }), jsxs("span", {
-              className: styles$K.text,
+              className: styles$L.text,
               children: [jsx("span", {
-                className: styles$K.message,
+                className: styles$L.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$K.description,
+                className: styles$L.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$K.action,
+              className: styles$L.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6633,15 +6862,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$J = {
+const styles$K = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$J.badge,
+    className: styles$K.badge,
     children: [jsxs("svg", {
-      className: styles$J.icon,
+      className: styles$K.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6671,7 +6900,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$I = {
+const styles$J = {
   root: root$3,
   center: center$1,
   end,
@@ -6689,12 +6918,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$I.root, styles$I[size], styles$I[align], styles$I[variant]].join(" "),
+    className: [styles$J.root, styles$J[size], styles$J[align], styles$J[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$I.price,
+      className: styles$J.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$I.compareAt,
+      className: styles$J.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: t("Was {0}", format(compareAt2))
@@ -6758,13 +6987,13 @@ const marker = "_marker_1cum7_27";
 const tick = "_tick_1cum7_35";
 const pending$2 = "_pending_1cum7_44";
 const connector = "_connector_1cum7_68";
-const text$3 = "_text_1cum7_84";
+const text$4 = "_text_1cum7_84";
 const label$2 = "_label_1cum7_101";
 const past = "_past_1cum7_113";
 const current = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$H = {
+const styles$I = {
   timeline,
   row: row$8,
   line: line$3,
@@ -6772,7 +7001,7 @@ const styles$H = {
   tick,
   pending: pending$2,
   connector,
-  text: text$3,
+  text: text$4,
   label: label$2,
   past,
   current,
@@ -6798,39 +7027,39 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$H.timeline,
+    className: styles$I.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$H.row,
+        className: styles$I.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$H.line,
+          className: styles$I.line,
           children: [jsx("span", {
-            className: styles$H.marker,
+            className: styles$I.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$H.pending,
+              className: styles$I.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$H.text,
+            className: styles$I.text,
             children: [jsx("span", {
-              className: [styles$H.label, styles$H[state]].join(" "),
+              className: [styles$I.label, styles$I[state]].join(" "),
               children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
-              className: styles$H.date,
+              className: styles$I.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$H.date,
+              className: styles$I.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$H.connector,
+          className: styles$I.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -6844,7 +7073,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$H.tick,
+    className: styles$I.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -6989,7 +7218,7 @@ const row$7 = "_row_1hsxt_16";
 const free = "_free_1hsxt_53";
 const pending$1 = "_pending_1hsxt_59";
 const discount = "_discount_1hsxt_69";
-const styles$G = {
+const styles$H = {
   summary,
   row: row$7,
   free,
@@ -7018,11 +7247,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$G.summary,
+    className: styles$H.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$G.row, styles$G.discount].join(" "),
+          className: [styles$H.row, styles$H.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -7032,11 +7261,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$G.row,
+        className: styles$H.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$G.pending : void 0,
+          className: pending2 ? styles$H.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -7046,7 +7275,7 @@ 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$G.free,
+      className: styles$H.free,
       children: t("Free")
     });
   }
@@ -7055,7 +7284,7 @@ function renderValue(key, pricing, format, t) {
 const lines$1 = "_lines_1lx0d_19";
 const line$2 = "_line_1lx0d_19";
 const thumb$2 = "_thumb_1lx0d_34";
-const image$9 = "_image_1lx0d_44";
+const image$a = "_image_1lx0d_44";
 const placeholder$8 = "_placeholder_1lx0d_51";
 const lineBody = "_lineBody_1lx0d_56";
 const lineText = "_lineText_1lx0d_65";
@@ -7073,11 +7302,11 @@ const itemsHeader = "_itemsHeader_1lx0d_14";
 const itemsTitle = "_itemsTitle_1lx0d_238";
 const itemsCount = "_itemsCount_1lx0d_249";
 const cardLines = "_cardLines_1lx0d_268";
-const styles$F = {
+const styles$G = {
   lines: lines$1,
   line: line$2,
   thumb: thumb$2,
-  image: image$9,
+  image: image$a,
   placeholder: placeholder$8,
   lineBody,
   lineText,
@@ -7116,42 +7345,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$F.line,
+    className: styles$G.line,
     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.image
+        className: styles$G.image
       }) : jsx("div", {
-        className: styles$F.placeholder,
+        className: styles$G.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$F.lineBody,
+      className: styles$G.lineBody,
       children: [jsxs("div", {
-        className: styles$F.lineText,
+        className: styles$G.lineText,
         children: [jsx("span", {
-          className: styles$F.lineTitle,
+          className: styles$G.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$F.lineMeta,
+          className: styles$G.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$F.detail,
+            className: styles$G.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$F.linePrice,
+        className: styles$G.linePrice,
         children: [jsx("span", {
-          className: styles$F.paid,
+          className: styles$G.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$F.was,
+          className: styles$G.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: t("Was {0}", format(compareAt2))
@@ -7167,7 +7396,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$F.lines,
+    className: styles$G.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -7178,19 +7407,19 @@ function OrderItemsCard({ order }) {
   const t = useT();
   const itemCount = order.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("section", {
-    className: styles$F.card,
+    className: styles$G.card,
     "aria-label": t("Items"),
     children: [jsxs("div", {
-      className: styles$F.itemsHeader,
+      className: styles$G.itemsHeader,
       children: [jsx("h2", {
-        className: styles$F.itemsTitle,
+        className: styles$G.itemsTitle,
         children: t("Items")
       }), jsx("span", {
-        className: styles$F.itemsCount,
+        className: styles$G.itemsCount,
         children: itemCount
       })]
     }), jsx("ul", {
-      className: [styles$F.lines, styles$F.cardLines].join(" "),
+      className: [styles$G.lines, styles$G.cardLines].join(" "),
       children: order.items.map((item2) => jsx(OrderLine, {
         item: item2
       }, item2.line_ref))
@@ -7200,13 +7429,13 @@ function OrderItemsCard({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$F.card,
+    className: styles$G.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$F.cardTitle,
+      className: styles$G.cardTitle,
       children: t("Shipping address")
     }), jsx("p", {
-      className: styles$F.cardBody,
+      className: styles$G.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -7214,10 +7443,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$F.card, styles$F.summaryCard].join(" "),
+    className: [styles$G.card, styles$G.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$F.cardTitle,
+      className: styles$G.cardTitle,
       children: t("Order summary")
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -7254,7 +7483,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$E = {
+const styles$F = {
   header: header$6,
   slot,
   handleSlot,
@@ -7282,23 +7511,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$E.header,
+    className: styles$F.header,
     children: [jsx("div", {
-      className: styles$E.slot,
+      className: styles$F.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$E.handleSlot,
+      className: styles$F.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$E.handle
+        className: styles$F.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$E.closeSlot,
+      className: styles$F.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$E.close,
+        className: styles$F.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -7346,7 +7575,7 @@ function useModalDialog(open, onClose, ref) {
 }
 const scrim$5 = "_scrim_1oaa3_8";
 const sheet$3 = "_sheet_1oaa3_20";
-const body$6 = "_body_1oaa3_32";
+const body$7 = "_body_1oaa3_32";
 const title$l = "_title_1oaa3_53";
 const options$1 = "_options_1oaa3_61";
 const option$1 = "_option_1oaa3_61";
@@ -7354,10 +7583,10 @@ 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$D = {
+const styles$E = {
   scrim: scrim$5,
   sheet: sheet$3,
-  body: body$6,
+  body: body$7,
   title: title$l,
   options: options$1,
   option: option$1,
@@ -7372,12 +7601,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const t = useT();
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$D.scrim,
+    className: styles$E.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$D.sheet,
+      className: styles$E.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -7386,23 +7615,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$D.body,
+        className: styles$E.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$D.title,
+          className: styles$E.title,
           children: t(title2)
         }), jsx("div", {
-          className: styles$D.options,
+          className: styles$E.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$D.option,
+            className: styles$E.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$D.radio,
+              className: styles$E.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -7423,15 +7652,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$D.label,
+              className: styles$E.label,
               children: t(o.label)
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$D.footer,
+        className: styles$E.footer,
         children: [error2 && jsx("p", {
-          className: styles$D.error,
+          className: styles$E.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -7456,7 +7685,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$C = {
+const styles$D = {
   line: line$1,
   thumb: thumb$1,
   img: img$1,
@@ -7472,35 +7701,35 @@ function ReturnItemRow({ item: item2, className }) {
   const { format } = useMoney();
   const t = useT();
   return jsxs("div", {
-    className: [styles$C.line, className ?? ""].join(" ").trim(),
+    className: [styles$D.line, className ?? ""].join(" ").trim(),
     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 && jsx("p", {
-        className: styles$C.attrs,
+        className: styles$D.attrs,
         children: t("Size: {0}", item2.attributes.size)
       })]
     }), 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 && jsxs("span", {
-        className: styles$C.was,
+        className: styles$D.was,
         children: [jsx("span", {
           className: "visually-hidden",
           children: t("Was {0}", format(item2.compare_at_unit_price))
@@ -7523,7 +7752,7 @@ const check = "_check_15fz5_66";
 const row$6 = "_row_15fz5_110";
 const reason = "_reason_15fz5_135";
 const reasonSet = "_reasonSet_15fz5_155";
-const styles$B = {
+const styles$C = {
   page: page$6,
   titles: titles$2,
   title: title$k,
@@ -7630,55 +7859,55 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   }
   if (returnable.length === 0) {
     return jsx("div", {
-      className: styles$B.page,
+      className: styles$C.page,
       children: jsxs("div", {
-        className: styles$B.titles,
+        className: styles$C.titles,
         children: [jsx("h1", {
-          className: styles$B.title,
+          className: styles$C.title,
           children: t("Nothing left to return")
         }), jsx("p", {
-          className: styles$B.subtitle,
+          className: styles$C.subtitle,
           children: t("Every item on this order has already been returned or cancelled.")
         })]
       })
     });
   }
   return jsxs("div", {
-    className: styles$B.page,
+    className: styles$C.page,
     children: [jsxs("div", {
-      className: styles$B.titles,
+      className: styles$C.titles,
       children: [jsx("h1", {
-        className: styles$B.title,
+        className: styles$C.title,
         children: t("What do you want to return?")
       }), jsx("p", {
-        className: styles$B.subtitle,
+        className: styles$C.subtitle,
         children: t("Select items you want to return")
       })]
     }), jsx("div", {
-      className: styles$B.list,
+      className: styles$C.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$B.card,
+          className: styles$C.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$B.checkSlot,
+            className: styles$C.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$B.check,
+              className: styles$C.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$B.row,
+            className: styles$C.row,
             children: [jsx(ReturnItemRow, {
               item: item2
             }), jsxs("button", {
               type: "button",
-              className: `${styles$B.reason} ${reason2 ? styles$B.reasonSet : ""}`,
+              className: `${styles$C.reason} ${reason2 ? styles$C.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7726,11 +7955,11 @@ const step2 = "_step2_51f4e_74";
 const stepHead = "_stepHead_51f4e_80";
 const number = "_number_51f4e_87";
 const stepTitle = "_stepTitle_51f4e_102";
-const body$5 = "_body_51f4e_113";
+const body$6 = "_body_51f4e_113";
 const body2 = "_body2_51f4e_121";
 const download = "_download_51f4e_139";
 const note$1 = "_note_51f4e_161";
-const styles$A = {
+const styles$B = {
   page: page$5,
   top,
   items: items$2,
@@ -7743,7 +7972,7 @@ const styles$A = {
   stepHead,
   number,
   stepTitle,
-  body: body$5,
+  body: body$6,
   body2,
   download,
   note: note$1
@@ -7804,42 +8033,42 @@ function ReturnLabelView({ ret, onDone }) {
   const t = useT();
   const { preparing, unavailable, onDownload } = useLabelDownload(ret.label_url);
   return jsxs("div", {
-    className: styles$A.page,
+    className: styles$B.page,
     children: [jsxs("div", {
-      className: styles$A.top,
+      className: styles$B.top,
       children: [jsx("div", {
-        className: styles$A.items,
+        className: styles$B.items,
         children: ret.items.map((item2) => jsx(ReturnItemRow, {
           item: item2
         }, item2.line_ref))
       }), jsxs("div", {
-        className: styles$A.intro,
+        className: styles$B.intro,
         children: [jsx("h1", {
-          className: styles$A.title,
+          className: styles$B.title,
           children: t("We’ve generated your return label")
         }), jsx("p", {
-          className: styles$A.subtitle,
+          className: styles$B.subtitle,
           children: t("Follow the instructions below to complete your return")
         })]
       }), jsxs("div", {
-        className: styles$A.card,
+        className: styles$B.card,
         children: [jsxs("section", {
-          className: styles$A.step,
+          className: styles$B.step,
           children: [jsxs("div", {
-            className: styles$A.stepHead,
+            className: styles$B.stepHead,
             children: [jsx("span", {
-              className: styles$A.number,
+              className: styles$B.number,
               "aria-hidden": "true",
               children: "1"
             }), jsx("h2", {
-              className: styles$A.stepTitle,
+              className: styles$B.stepTitle,
               children: t("Download your return label")
             })]
           }), jsx("p", {
-            className: styles$A.body,
+            className: styles$B.body,
             children: t("Tap the button below to download your pre-paid return label")
           }), ret.label_url && jsxs("a", {
-            className: styles$A.download,
+            className: styles$B.download,
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
@@ -7851,27 +8080,27 @@ function ReturnLabelView({ ret, onDone }) {
               children: ` ${t("(opens in a new tab)")}`
             })]
           }), unavailable && jsx("p", {
-            className: styles$A.note,
+            className: styles$B.note,
             role: "status",
             children: t("Your return label is not ready yet. Try again in a moment.")
           }), ret.label_email && jsxs("p", {
-            className: styles$A.note,
+            className: styles$B.note,
             children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
           })]
         }), jsxs("section", {
-          className: styles$A.step2,
+          className: styles$B.step2,
           children: [jsxs("div", {
-            className: styles$A.stepHead,
+            className: styles$B.stepHead,
             children: [jsx("span", {
-              className: styles$A.number,
+              className: styles$B.number,
               "aria-hidden": "true",
               children: "2"
             }), jsx("h2", {
-              className: styles$A.stepTitle,
+              className: styles$B.stepTitle,
               children: t("Pack and ship the item")
             })]
           }), jsxs("p", {
-            className: styles$A.body2,
+            className: styles$B.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.")]
           })]
         })]
@@ -7899,7 +8128,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$z = {
+const styles$A = {
   page: page$4,
   titles: titles$1,
   title: title$i,
@@ -7933,42 +8162,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$z.page,
+      className: styles$A.page,
       children: [jsxs("div", {
-        className: styles$z.titles,
+        className: styles$A.titles,
         children: [jsx("h1", {
-          className: styles$z.title,
+          className: styles$A.title,
           children: t("Return in progress")
         }), jsx("p", {
-          className: styles$z.subtitle,
+          className: styles$A.subtitle,
           children: t("Return #{0} · Reported {1}", ret.return_ref, reported)
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$z.items,
+        className: styles$A.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$z.item,
+          className: styles$A.item,
           children: [jsx("div", {
-            className: styles$z.thumb,
+            className: styles$A.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$z.img
+              className: styles$A.img
             }) : jsx("div", {
-              className: styles$z.placeholder,
+              className: styles$A.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$z.meta,
+            className: styles$A.meta,
             children: [jsx("p", {
-              className: styles$z.name,
+              className: styles$A.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$z.attrs,
+              className: styles$A.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: t("Size: {0}", item2.attributes.size)
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -7976,12 +8205,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$z.price,
+            className: styles$A.price,
             children: [jsx("span", {
-              className: styles$z.paid,
+              className: styles$A.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$z.was,
+              className: styles$A.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -8100,7 +8329,7 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
 const page$3 = "_page_1iwin_8";
 const widget = "_widget_1iwin_18";
 const titleRow = "_titleRow_1iwin_26";
-const headline$1 = "_headline_1iwin_42";
+const headline$2 = "_headline_1iwin_42";
 const track$5 = "_track_1iwin_74";
 const rule$1 = "_rule_1iwin_99";
 const help = "_help_1iwin_109";
@@ -8113,11 +8342,11 @@ const cancel = "_cancel_1iwin_197";
 const cancelledHead = "_cancelledHead_1iwin_221";
 const cancelledTitle = "_cancelledTitle_1iwin_227";
 const cancelledMeta = "_cancelledMeta_1iwin_241";
-const styles$y = {
+const styles$z = {
   page: page$3,
   widget,
   titleRow,
-  headline: headline$1,
+  headline: headline$2,
   track: track$5,
   rule: rule$1,
   help,
@@ -8220,7 +8449,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$y.page,
+      className: styles$z.page,
       children: [jsx(Skeleton, {
         height: 206,
         radius: 8
@@ -8298,18 +8527,18 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   if (order.status === "cancelled") {
     return jsxs("div", {
-      className: styles$y.page,
+      className: styles$z.page,
       ref: cancelledPage,
       children: [jsxs("div", {
-        className: styles$y.cancelledHead,
+        className: styles$z.cancelledHead,
         children: [jsx("h1", {
-          className: styles$y.cancelledTitle,
+          className: styles$z.cancelledTitle,
           children: t("Order cancelled")
         }), jsx("p", {
-          className: styles$y.cancelledMeta,
+          className: styles$z.cancelledMeta,
           children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
-      }), jsx(Button, {
+      }), !order.vip && jsx(Button, {
         variant: "primary",
         fullWidth: true,
         loading: reordering,
@@ -8325,17 +8554,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     });
   }
   return jsxs("div", {
-    className: styles$y.page,
+    className: styles$z.page,
     children: [jsxs("section", {
-      className: styles$y.widget,
+      className: styles$z.widget,
       "aria-label": t("Delivery status"),
       children: [jsxs("div", {
-        className: styles$y.titleRow,
+        className: styles$z.titleRow,
         children: [jsx("h1", {
-          className: styles$y.headline,
+          className: styles$z.headline,
           children: t("Order #{0}", shortRef$1(order.order_ref))
         }), order.tracking?.url && inTransit && jsxs("a", {
-          className: styles$y.track,
+          className: styles$z.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -8352,7 +8581,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         locale
       })]
     }), jsx("hr", {
-      className: styles$y.rule
+      className: styles$z.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -8361,7 +8590,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       order
     }), order.can_cancel && jsx("button", {
       type: "button",
-      className: styles$y.cancel,
+      className: styles$z.cancel,
       onClick: () => setCancelOpen(true),
       children: t("Cancel order")
     }), jsx(NeedHelp, {
@@ -8414,14 +8643,14 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   if (order.status !== "delivered") return null;
   const returns = order.returns ?? [];
   return jsxs("section", {
-    className: styles$y.help,
+    className: styles$z.help,
     "aria-labelledby": "order-help",
     children: [jsx("h2", {
-      className: styles$y.helpTitle,
+      className: styles$z.helpTitle,
       id: "order-help",
       children: t("Need help?")
     }), jsxs("div", {
-      className: styles$y.helpRows,
+      className: styles$z.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, " "),
@@ -8451,14 +8680,14 @@ function HelpRow({ label: label2, status, onClick }) {
   const t = useT();
   return jsxs("button", {
     type: "button",
-    className: styles$y.helpRow,
+    className: styles$z.helpRow,
     onClick,
     children: [jsx("span", {
       children: t(label2)
     }), jsxs("span", {
-      className: styles$y.helpRowEnd,
+      className: styles$z.helpRowEnd,
       children: [status && jsx("span", {
-        className: styles$y.helpStatus,
+        className: styles$z.helpStatus,
         children: t(status)
       }), jsx(ChevronRight$1, {})]
     })]
@@ -8470,15 +8699,15 @@ function shortRef$1(orderRef) {
 const page$2 = "_page_vqbqs_6";
 const confirmed = "_confirmed_vqbqs_16";
 const title$h = "_title_vqbqs_22";
-const headline = "_headline_vqbqs_47";
+const headline$1 = "_headline_vqbqs_47";
 const subtitle$4 = "_subtitle_vqbqs_65";
 const rule = "_rule_vqbqs_77";
 const done = "_done_vqbqs_94";
-const styles$x = {
+const styles$y = {
   page: page$2,
   confirmed,
   title: title$h,
-  headline,
+  headline: headline$1,
   subtitle: subtitle$4,
   rule,
   done
@@ -8528,7 +8757,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsx(Skeleton, {
         height: 140,
         radius: 8
@@ -8551,17 +8780,17 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     });
   }
   return jsxs("div", {
-    className: styles$x.page,
+    className: styles$y.page,
     children: [jsxs("section", {
-      className: styles$x.confirmed,
+      className: styles$y.confirmed,
       "aria-label": t("Order confirmation"),
       children: [jsxs("div", {
-        className: styles$x.title,
+        className: styles$y.title,
         children: [jsx("h1", {
-          className: styles$x.headline,
+          className: styles$y.headline,
           children: t("Your order is confirmed")
         }), order.email && jsx("p", {
-          className: styles$x.subtitle,
+          className: styles$y.subtitle,
           children: t("We’ve sent a confirmation to {0}", order.email)
         })]
       }), jsx(OrderTimeline, {
@@ -8572,7 +8801,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         locale
       })]
     }), jsx("hr", {
-      className: styles$x.rule
+      className: styles$y.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -8582,7 +8811,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     }), onDone && jsx(Button, {
       variant: "secondary",
       fullWidth: true,
-      className: styles$x.done,
+      className: styles$y.done,
       onClick: onDone,
       children: t("Done")
     })]
@@ -8593,7 +8822,7 @@ const progress = "_progress_u46qd_22";
 const delivered = "_delivered_u46qd_27";
 const neutral = "_neutral_u46qd_34";
 const critical = "_critical_u46qd_43";
-const styles$w = {
+const styles$x = {
   badge: badge$2,
   progress,
   delivered,
@@ -8619,7 +8848,7 @@ function OrderStatusBadge({ status }) {
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$w.badge, styles$w[tone]].join(" "),
+    className: [styles$x.badge, styles$x[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -8638,13 +8867,13 @@ function ReturnStatusBadge({ status }) {
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
   const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$w.badge, styles$w[tone]].join(" "),
+    className: [styles$x.badge, styles$x[tone]].join(" "),
     children: t(label2)
   });
 }
 const page$1 = "_page_qj11j_2";
 const empty = "_empty_qj11j_22";
-const cta$1 = "_cta_qj11j_32";
+const cta$2 = "_cta_qj11j_32";
 const card$1 = "_card_qj11j_55";
 const tappable = "_tappable_qj11j_70";
 const head$1 = "_head_qj11j_79";
@@ -8655,14 +8884,14 @@ const bottom$1 = "_bottom_qj11j_120";
 const strip = "_strip_qj11j_128";
 const meta$1 = "_meta_qj11j_141";
 const tile$2 = "_tile_qj11j_150";
-const image$8 = "_image_qj11j_160";
+const image$9 = "_image_qj11j_160";
 const placeholder$5 = "_placeholder_qj11j_167";
 const more = "_more_qj11j_174";
 const chevron$2 = "_chevron_qj11j_187";
-const styles$v = {
+const styles$w = {
   page: page$1,
   empty,
-  cta: cta$1,
+  cta: cta$2,
   card: card$1,
   tappable,
   head: head$1,
@@ -8673,7 +8902,7 @@ const styles$v = {
   strip,
   meta: meta$1,
   tile: tile$2,
-  image: image$8,
+  image: image$9,
   placeholder: placeholder$5,
   more,
   chevron: chevron$2
@@ -8737,7 +8966,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$v.page,
+      className: styles$w.page,
       children: [jsx(Skeleton, {
         height: 148,
         radius: 12
@@ -8758,14 +8987,14 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }
   if (orders2.length === 0 && returns.length === 0) {
     return jsx("div", {
-      className: styles$v.empty,
+      className: styles$w.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$v.cta,
+            className: styles$w.cta,
             onClick: onStartShopping,
             children: t("Continue shopping")
           })
@@ -8783,7 +9012,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
     ret
   }))].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
   return jsx("ul", {
-    className: styles$v.page,
+    className: styles$w.page,
     children: rows.map((row2) => jsx("li", {
       children: "order" in row2 ? jsx(OrderCard, {
         order: row2.order,
@@ -8807,39 +9036,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$v.head,
+      className: styles$w.head,
       children: [jsxs("div", {
-        className: styles$v.heading,
+        className: styles$w.heading,
         children: [jsx("span", {
-          className: styles$v.title,
+          className: styles$w.title,
           children: `${t("Return")} #${shortRef(ret.return_ref)}`
         }), jsx("span", {
-          className: styles$v.date,
+          className: styles$w.date,
           children: formatPlaced(ret.reported_at, locale)
         })]
       }), jsx(ReturnStatusBadge, {
         status: ret.status
       })]
     }), jsxs("div", {
-      className: styles$v.bottom,
+      className: styles$w.bottom,
       children: [jsx(ReturnThumbnails, {
         ret
       }), jsx("span", {
-        className: styles$v.meta,
+        className: styles$w.meta,
         children: `${items2} · ${money2(ret.value)}`
       }), onOpen && jsx("span", {
-        className: styles$v.chevron,
+        className: styles$w.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$v.card,
+    className: styles$w.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$v.card, styles$v.tappable].join(" "),
+    className: [styles$w.card, styles$w.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `${t("Return")} ${shortRef(ret.return_ref)}, ${ret.headline}`,
     children: body3
@@ -8852,27 +9081,27 @@ function ReturnThumbnails({ ret }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$v.strip,
+      className: styles$w.strip,
       children: jsx("div", {
-        className: [styles$v.tile, styles$v.placeholder].join(" "),
+        className: [styles$w.tile, styles$w.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$v.strip,
+    className: styles$w.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$v.tile,
+        className: styles$w.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$v.image
+          className: styles$w.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$v.more,
+          className: styles$w.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -8889,36 +9118,36 @@ function OrderCard({ order, locale, onOpen }) {
   const t = useT();
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$v.head,
+      className: styles$w.head,
       children: [jsxs("div", {
-        className: styles$v.heading,
+        className: styles$w.heading,
         children: [jsx("span", {
-          className: styles$v.title,
+          className: styles$w.title,
           children: t("Order #{0}", shortRef(order.order_ref))
         }), jsx("span", {
-          className: styles$v.date,
+          className: styles$w.date,
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
         status: order.status
       })]
     }), jsxs("div", {
-      className: styles$v.bottom,
+      className: styles$w.bottom,
       children: [jsx(Thumbnails, {
         order
       }), onOpen && jsx("span", {
-        className: styles$v.chevron,
+        className: styles$w.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$v.card,
+    className: styles$w.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$v.card, styles$v.tappable].join(" "),
+    className: [styles$w.card, styles$w.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
     children: body3
@@ -8931,27 +9160,27 @@ function Thumbnails({ order }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$v.strip,
+      className: styles$w.strip,
       children: jsx("div", {
-        className: [styles$v.tile, styles$v.placeholder].join(" "),
+        className: [styles$w.tile, styles$w.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$v.strip,
+    className: styles$w.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$v.tile,
+        className: styles$w.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$v.image
+          className: styles$w.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$v.more,
+          className: styles$w.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -8981,7 +9210,7 @@ const swatches = "_swatches_mdi63_1";
 const swatch = "_swatch_mdi63_1";
 const swatchActive = "_swatchActive_mdi63_18";
 const swatchDot = "_swatchDot_mdi63_22";
-const styles$u = {
+const styles$v = {
   swatches,
   swatch,
   swatchActive,
@@ -8991,12 +9220,12 @@ function ColourSwatches({ variants, className }) {
   const colours = colourOptions(variants);
   if (colours.length === 0) return null;
   return jsx("div", {
-    className: [styles$u.swatches, className ?? ""].join(" ").trim(),
+    className: [styles$v.swatches, className ?? ""].join(" ").trim(),
     "aria-hidden": "true",
     children: colours.map((c, i) => jsx("span", {
-      className: [styles$u.swatch, i === 0 ? styles$u.swatchActive : ""].join(" "),
+      className: [styles$v.swatch, i === 0 ? styles$v.swatchActive : ""].join(" "),
       children: jsx("span", {
-        className: styles$u.swatchDot,
+        className: styles$v.swatchDot,
         style: {
           background: swatchColour(c.value)
         }
@@ -9006,7 +9235,7 @@ function ColourSwatches({ variants, className }) {
 }
 const tile$1 = "_tile_yg69t_7";
 const media$2 = "_media_yg69t_15";
-const image$7 = "_image_yg69t_25";
+const image$8 = "_image_yg69t_25";
 const placeholder$4 = "_placeholder_yg69t_29";
 const topBadge = "_topBadge_yg69t_37";
 const saleBadge$2 = "_saleBadge_yg69t_78";
@@ -9016,10 +9245,10 @@ const titlePrice$1 = "_titlePrice_yg69t_100";
 const title$f = "_title_yg69t_5";
 const large = "_large_yg69t_185";
 const swatchSlot = "_swatchSlot_yg69t_223";
-const styles$t = {
+const styles$u = {
   tile: tile$1,
   media: media$2,
-  image: image$7,
+  image: image$8,
   placeholder: placeholder$4,
   topBadge,
   saleBadge: saleBadge$2,
@@ -9038,37 +9267,37 @@ function ProductTile({ product, priority, size = "default" }) {
   const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
-    className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
+    className: [styles$u.tile, size === "large" ? styles$u.large : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$t.media,
+      className: styles$u.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$t.image,
+        className: styles$u.image,
         priority
       }) : jsx("div", {
-        className: styles$t.placeholder,
+        className: styles$u.placeholder,
         "aria-hidden": "true"
       }), anyInStock && topBadge2 && jsx("span", {
-        className: styles$t.topBadge,
+        className: styles$u.topBadge,
         children: topBadge2
       }), anyInStock && pct !== void 0 && jsx("span", {
-        className: styles$t.saleBadge,
+        className: styles$u.saleBadge,
         children: jsx(SaleBadge, {
           pct
         })
       }), !anyInStock && jsx("span", {
-        className: styles$t.oos,
+        className: styles$u.oos,
         children: t("Out of stock")
       })]
     }), jsxs("div", {
-      className: styles$t.bottom,
+      className: styles$u.bottom,
       children: [jsxs("div", {
-        className: styles$t.titlePrice,
+        className: styles$u.titlePrice,
         children: [jsx("span", {
-          className: styles$t.title,
+          className: styles$u.title,
           children: product.title
         }), jsx(PriceBlock, {
           price: product.price,
@@ -9079,7 +9308,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })]
       }), jsx(ColourSwatches, {
         variants: product.variants,
-        className: styles$t.swatchSlot
+        className: styles$u.swatchSlot
       })]
     })]
   });
@@ -9089,7 +9318,7 @@ const title$e = "_title_v48ok_21";
 const link = "_link_v48ok_30";
 const track$4 = "_track_v48ok_42";
 const frame = "_frame_v48ok_62";
-const image$6 = "_image_v48ok_73";
+const image$7 = "_image_v48ok_73";
 const placeholder$3 = "_placeholder_v48ok_77";
 const saleBadge$1 = "_saleBadge_v48ok_89";
 const oos$2 = "_oos_v48ok_97";
@@ -9099,13 +9328,13 @@ const name = "_name_v48ok_142";
 const price$1 = "_price_v48ok_155";
 const paid = "_paid_v48ok_164";
 const was$1 = "_was_v48ok_170";
-const styles$s = {
+const styles$t = {
   section: section$3,
   title: title$e,
   link,
   track: track$4,
   frame,
-  image: image$6,
+  image: image$7,
   placeholder: placeholder$3,
   saleBadge: saleBadge$1,
   oos: oos$2,
@@ -9123,54 +9352,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$s.section,
+    className: styles$t.section,
     "aria-labelledby": `gallery-${product.sku}`,
     children: [jsx("h2", {
-      className: styles$s.title,
+      className: styles$t.title,
       id: `gallery-${product.sku}`,
       children: title2
     }), jsxs(ShopLink, {
       to: `/product/${encodeURIComponent(product.sku)}`,
-      className: styles$s.link,
+      className: styles$t.link,
       children: [jsx("ul", {
-        className: styles$s.track,
+        className: styles$t.track,
         "aria-label": t("{0} photographs", product.title),
         children: images.map((src, i) => jsxs("li", {
-          className: styles$s.frame,
+          className: styles$t.frame,
           children: [src ? jsx(ShopImage, {
             src,
             alt: "",
             fill: true,
             sizes: "165px",
-            className: styles$s.image,
+            className: styles$t.image,
             ...i === 0 ? {
               priority: true
             } : {}
           }) : jsx("div", {
-            className: styles$s.placeholder,
+            className: styles$t.placeholder,
             "aria-hidden": "true"
           }), i === 0 && inStock && pct !== void 0 && jsx("span", {
-            className: styles$s.saleBadge,
+            className: styles$t.saleBadge,
             children: jsx(SaleBadge, {
               pct
             })
           }), i === 0 && !inStock && jsx("span", {
-            className: styles$s.oos,
+            className: styles$t.oos,
             children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
-        className: styles$s.caption,
+        className: styles$t.caption,
         children: [jsx("span", {
-          className: styles$s.name,
+          className: styles$t.name,
           children: product.title
         }), jsxs("span", {
-          className: styles$s.price,
+          className: styles$t.price,
           children: [jsx("span", {
-            className: styles$s.paid,
+            className: styles$t.paid,
             children: format(product.price)
           }), product.compare_at && jsxs("span", {
-            className: styles$s.was,
+            className: styles$t.was,
             children: [jsx("span", {
               className: "visually-hidden",
               children: t("Was {0}", format(product.compare_at))
@@ -9181,7 +9410,7 @@ function ProductGallery({ title: title2, product }) {
           })]
         }), jsx(ColourSwatches, {
           variants: product.variants,
-          className: styles$s.swatchRow
+          className: styles$t.swatchRow
         })]
       })]
     })]
@@ -9192,7 +9421,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$r = {
+const styles$s = {
   bar: bar$1,
   chips: chips$1,
   chip: chip$1,
@@ -9203,24 +9432,24 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
   const t = useT();
   const hasActive = active.length > 0;
   return jsxs("div", {
-    className: styles$r.bar,
+    className: styles$s.bar,
     role: "group",
     "aria-label": t("Filters"),
     children: [jsx("div", {
-      className: styles$r.chips,
+      className: styles$s.chips,
       children: options2.map((opt) => {
         const on2 = active.includes(opt.value);
         return jsx("button", {
           type: "button",
           "aria-pressed": on2,
-          className: [styles$r.chip, on2 ? styles$r.on : ""].join(" "),
+          className: [styles$s.chip, on2 ? styles$s.on : ""].join(" "),
           onClick: () => onToggle(opt.value),
           children: opt.label
         }, opt.value);
       })
     }), hasActive && onClear && jsx("button", {
       type: "button",
-      className: styles$r.clear,
+      className: styles$s.clear,
       onClick: onClear,
       children: t("Clear")
     })]
@@ -9228,7 +9457,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
 }
 const wrap$2 = "_wrap_15ntf_1";
 const grid$1 = "_grid_15ntf_7";
-const styles$q = {
+const styles$r = {
   wrap: wrap$2,
   grid: grid$1
 };
@@ -9274,7 +9503,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$q.wrap,
+    className: styles$r.wrap,
     children: [filters.length > 0 && jsx(FilterBar, {
       options: filters,
       active,
@@ -9289,7 +9518,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
-      className: styles$q.grid,
+      className: styles$r.grid,
       children: visible.map((product, i) => jsx("li", {
         children: jsx(ProductTile, {
           product,
@@ -9297,7 +9526,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         })
       }, product.sku))
     }), loading && jsx("div", {
-      className: styles$q.grid,
+      className: styles$r.grid,
       "aria-hidden": "true",
       children: [0, 1].map((i) => jsx(Skeleton, {
         height: 200,
@@ -9316,7 +9545,7 @@ const seeAll = "_seeAll_1rll1_27";
 const track$3 = "_track_1rll1_33";
 const item = "_item_1rll1_67";
 const inset = "_inset_1rll1_79";
-const styles$p = {
+const styles$q = {
   rail,
   header: header$5,
   title: title$d,
@@ -9329,22 +9558,22 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
   const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
-    className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "),
+    className: [styles$q.rail, inset2 ? styles$q.inset : ""].join(" "),
     "aria-label": title2,
     children: [jsxs("div", {
-      className: styles$p.header,
+      className: styles$q.header,
       children: [jsx("h2", {
-        className: styles$p.title,
+        className: styles$q.title,
         children: title2
       }), seeAllTo && jsx(ShopLink, {
-        className: styles$p.seeAll,
+        className: styles$q.seeAll,
         to: seeAllTo,
         children: t("See all")
       })]
     }), jsx("ul", {
-      className: styles$p.track,
+      className: styles$q.track,
       children: products.map((product, i) => jsx("li", {
-        className: styles$p.item,
+        className: styles$q.item,
         children: jsx(ProductTile, {
           product,
           priority: i < 2
@@ -9361,9 +9590,9 @@ const grabber = "_grabber_uxpgl_51";
 const header$4 = "_header_uxpgl_59";
 const title$c = "_title_uxpgl_67";
 const close$1 = "_close_uxpgl_71";
-const body$4 = "_body_uxpgl_84";
+const body$5 = "_body_uxpgl_84";
 const footer = "_footer_uxpgl_97";
-const styles$o = {
+const styles$p = {
   overlay: overlay$2,
   scrim: scrim$4,
   sheet: sheet$2,
@@ -9372,7 +9601,7 @@ const styles$o = {
   header: header$4,
   title: title$c,
   close: close$1,
-  body: body$4,
+  body: body$5,
   footer
 };
 const DISMISS_THRESHOLD_PX = 96;
@@ -9403,14 +9632,14 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
   useModalDialog(open, onClose, sheetRef);
   if (!open) return null;
   return jsxs("div", {
-    className: styles$o.overlay,
+    className: styles$p.overlay,
     children: [jsx("div", {
-      className: styles$o.scrim,
+      className: styles$p.scrim,
       onClick: onClose,
       "aria-hidden": "true"
     }), jsxs(ShopSurface, {
       tone: "light",
-      className: styles$o.sheet,
+      className: styles$p.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId,
@@ -9420,7 +9649,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         transition: "none"
       } : void 0,
       children: [jsx("div", {
-        className: styles$o.grabArea,
+        className: styles$p.grabArea,
         onPointerDown: (e) => {
           e.currentTarget.setPointerCapture(e.pointerId);
           onDragStart(e.clientY);
@@ -9429,18 +9658,18 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         onPointerUp: onDragEnd,
         onPointerCancel: onDragEnd,
         children: jsx("div", {
-          className: styles$o.grabber,
+          className: styles$p.grabber,
           "aria-hidden": "true"
         })
       }), jsxs("div", {
-        className: styles$o.header,
+        className: styles$p.header,
         children: [jsx("h2", {
           id: titleId,
-          className: styles$o.title,
+          className: styles$p.title,
           children: title2
         }), jsx("button", {
           type: "button",
-          className: styles$o.close,
+          className: styles$p.close,
           onClick: onClose,
           "aria-label": t("Close"),
           children: jsx("svg", {
@@ -9458,10 +9687,10 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
           })
         })]
       }), jsx("div", {
-        className: styles$o.body,
+        className: styles$p.body,
         children
       }), footer2 && jsx("div", {
-        className: styles$o.footer,
+        className: styles$p.footer,
         children: footer2
       })]
     })]
@@ -9481,7 +9710,7 @@ const stepper = "_stepper_1rmip_10";
 const cap = "_cap_1rmip_23";
 const button = "_button_1rmip_31";
 const value$1 = "_value_1rmip_50";
-const styles$n = {
+const styles$o = {
   wrap: wrap$1,
   stepper,
   cap,
@@ -9559,24 +9788,24 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
     if (!atMax) onChange(qty + 1);
   }
   return jsxs("div", {
-    className: styles$n.wrap,
+    className: styles$o.wrap,
     children: [jsxs("div", {
-      className: styles$n.stepper,
+      className: styles$o.stepper,
       children: [jsx("button", {
         type: "button",
-        className: styles$n.button,
+        className: styles$o.button,
         onClick: decrement,
         disabled: disabled2,
         "aria-label": willDelete ? t("Remove item") : t("Decrease quantity"),
         children: willDelete ? jsx(TrashIcon, {}) : jsx(MinusIcon, {})
       }), jsx("span", {
-        className: styles$n.value,
+        className: styles$o.value,
         "aria-live": "polite",
         "aria-label": `Quantity ${qty}`,
         children: qty
       }), jsx("button", {
         type: "button",
-        className: styles$n.button,
+        className: styles$o.button,
         onClick: increment,
         disabled: disabled2 || atMax,
         "aria-label": t("Increase quantity"),
@@ -9585,7 +9814,7 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
       })]
     }), atMax && capDescribedBy === void 0 && jsx("span", {
       id: ownCapId,
-      className: styles$n.cap,
+      className: styles$o.cap,
       role: "status",
       children: max === 0 ? t("Out of stock") : t("Only {0} left", max)
     })]
@@ -9597,7 +9826,7 @@ const pending = "_pending_1dx14_18";
 const labels = "_labels_1dx14_24";
 const lowStock$1 = "_lowStock_1dx14_39";
 const media$1 = "_media_1dx14_49";
-const image$5 = "_image_1dx14_59";
+const image$6 = "_image_1dx14_59";
 const placeholder$2 = "_placeholder_1dx14_75";
 const saleBadge = "_saleBadge_1dx14_88";
 const oos$1 = "_oos_1dx14_103";
@@ -9610,14 +9839,14 @@ const detail = "_detail_1dx14_164";
 const price = "_price_1dx14_183";
 const amount = "_amount_1dx14_191";
 const was = "_was_1dx14_200";
-const styles$m = {
+const styles$n = {
   line,
   row: row$5,
   pending,
   labels,
   lowStock: lowStock$1,
   media: media$1,
-  image: image$5,
+  image: image$6,
   placeholder: placeholder$2,
   saleBadge,
   oos: oos$1,
@@ -9644,53 +9873,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$m.line, pending2 ? styles$m.pending : ""].join(" "),
+    className: [styles$n.line, pending2 ? styles$n.pending : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$m.row,
+      className: styles$n.row,
       children: [jsxs("div", {
-        className: styles$m.media,
+        className: styles$n.media,
         children: [displayImage ? jsx(ShopImage, {
           src: displayImage,
           alt: "",
           fill: true,
           sizes: "100px",
-          className: styles$m.image
+          className: styles$n.image
         }) : jsx("div", {
-          className: styles$m.placeholder,
+          className: styles$n.placeholder,
           "aria-hidden": "true"
         }), soldOut ? jsx("span", {
-          className: styles$m.oos,
+          className: styles$n.oos,
           id: noticeId,
           children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
-          className: styles$m.saleBadge,
+          className: styles$n.saleBadge,
           children: jsx(SaleBadge, {
             pct
           })
         })]
       }), jsxs("div", {
-        className: styles$m.info,
+        className: styles$n.info,
         children: [jsxs("div", {
-          className: styles$m.head,
+          className: styles$n.head,
           children: [jsxs("div", {
-            className: styles$m.meta,
+            className: styles$n.meta,
             children: [jsx("span", {
-              className: styles$m.title,
+              className: styles$n.title,
               children: displayTitle
             }), pairs.length > 0 && jsx("div", {
-              className: styles$m.details,
+              className: styles$n.details,
               children: pairs.map(({ key, label: label2, value: value2 }) => jsxs("span", {
-                className: styles$m.detail,
+                className: styles$n.detail,
                 children: [t(label2), ": ", value2]
               }, key))
             })]
           }), jsxs("div", {
-            className: styles$m.price,
+            className: styles$n.price,
             children: [jsx("span", {
-              className: styles$m.amount,
+              className: styles$n.amount,
               children: format(item2.line_total)
             }), compareAt2 && jsx("span", {
-              className: styles$m.was,
+              className: styles$n.was,
               children: format(compareAt2)
             })]
           })]
@@ -9704,10 +9933,10 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         })]
       })]
     }), lowStock2 && jsx("div", {
-      className: styles$m.labels,
+      className: styles$n.labels,
       children: jsx("span", {
         id: noticeId,
-        className: styles$m.lowStock,
+        className: styles$n.lowStock,
         role: "status",
         children: t("Only {0} left", available)
       })
@@ -9719,7 +9948,7 @@ const row$4 = "_row_1cf1a_10";
 const icon$2 = "_icon_1cf1a_16";
 const label = "_label_1cf1a_22";
 const divider$1 = "_divider_1cf1a_29";
-const styles$l = {
+const styles$m = {
   box: box$1,
   row: row$4,
   icon: icon$2,
@@ -9729,12 +9958,12 @@ const styles$l = {
 function ShippingInfo() {
   const t = useT();
   return jsxs("section", {
-    className: styles$l.box,
+    className: styles$m.box,
     "aria-label": t("Shipping and returns"),
     children: [jsxs("div", {
-      className: styles$l.row,
+      className: styles$m.row,
       children: [jsxs("svg", {
-        className: styles$l.icon,
+        className: styles$m.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -9759,16 +9988,16 @@ function ShippingInfo() {
           strokeWidth: "1.5"
         })]
       }), jsx("p", {
-        className: styles$l.label,
+        className: styles$m.label,
         children: t("Standard or express delivery")
       })]
     }), jsx("div", {
-      className: styles$l.divider,
+      className: styles$m.divider,
       role: "presentation"
     }), jsxs("div", {
-      className: styles$l.row,
+      className: styles$m.row,
       children: [jsxs("svg", {
-        className: styles$l.icon,
+        className: styles$m.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -9788,7 +10017,7 @@ function ShippingInfo() {
           strokeLinejoin: "round"
         })]
       }), jsx("p", {
-        className: styles$l.label,
+        className: styles$m.label,
         children: t("14 days returns")
       })]
     })]
@@ -9799,7 +10028,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$k = {
+const styles$l = {
   bar,
   floating: floating$1,
   divider,
@@ -9808,28 +10037,28 @@ const styles$k = {
 };
 function StickyCtaBar({ children, info: info2, variant = "floating" }) {
   return jsxs("div", {
-    className: [styles$k.bar, styles$k[variant]].join(" "),
+    className: [styles$l.bar, styles$l[variant]].join(" "),
     children: [info2 && jsx("div", {
-      className: styles$k.info,
+      className: styles$l.info,
       children: info2
     }), jsx("div", {
-      className: styles$k.actions,
+      className: styles$l.actions,
       children
     })]
   });
 }
 const surface = "_surface_1bdb0_15";
 const screen = "_screen_1bdb0_20";
-const body$3 = "_body_1bdb0_12";
+const body$4 = "_body_1bdb0_12";
 const items = "_items_1bdb0_34";
 const sectionHeader = "_sectionHeader_1bdb0_40";
 const sectionTitle = "_sectionTitle_1bdb0_46";
 const count = "_count_1bdb0_67";
 const lines = "_lines_1bdb0_91";
-const styles$j = {
+const styles$k = {
   surface,
   screen,
-  body: body$3,
+  body: body$4,
   items,
   sectionHeader,
   sectionTitle,
@@ -9842,7 +10071,7 @@ function CartView(props = {}) {
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
-    className: styles$j.surface,
+    className: styles$k.surface,
     children: jsx(CartViewContent, {
       ...props
     })
@@ -10004,22 +10233,22 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   }
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("div", {
-    className: styles$j.screen,
+    className: styles$k.screen,
     children: [jsxs("div", {
-      className: styles$j.body,
+      className: styles$k.body,
       children: [jsxs("section", {
-        className: styles$j.items,
+        className: styles$k.items,
         children: [jsxs("div", {
-          className: styles$j.sectionHeader,
+          className: styles$k.sectionHeader,
           children: [jsx("h2", {
-            className: styles$j.sectionTitle,
+            className: styles$k.sectionTitle,
             children: t("Items")
           }), jsx("span", {
-            className: styles$j.count,
+            className: styles$k.count,
             children: itemCount
           })]
         }), jsx("ul", {
-          className: styles$j.lines,
+          className: styles$k.lines,
           children: cart2.items.map((item2) => jsx("li", {
             children: jsx(CartLineItem, {
               item: item2,
@@ -10087,16 +10316,16 @@ function CartSheetProvider({ children }) {
 const gallery = "_gallery_1vbj7_1";
 const track$2 = "_track_1vbj7_5";
 const slide$1 = "_slide_1vbj7_20";
-const image$4 = "_image_1vbj7_27";
+const image$5 = "_image_1vbj7_27";
 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$i = {
+const styles$j = {
   gallery,
   track: track$2,
   slide: slide$1,
-  image: image$4,
+  image: image$5,
   placeholder: placeholder$1,
   dots: dots$2,
   dot: dot$2,
@@ -10143,30 +10372,30 @@ function MediaGallery({ media: media2, alt, focus }) {
   }
   if (media2.length === 0) {
     return jsx("div", {
-      className: styles$i.placeholder,
+      className: styles$j.placeholder,
       "aria-hidden": "true"
     });
   }
   return jsxs("div", {
-    className: styles$i.gallery,
+    className: styles$j.gallery,
     children: [jsx("div", {
-      className: styles$i.track,
+      className: styles$j.track,
       ref: trackRef,
       role: "group",
       "aria-label": `${alt} images`,
       children: media2.map((src, i) => jsx("div", {
-        className: styles$i.slide,
+        className: styles$j.slide,
         children: jsx(ShopImage, {
           src,
           alt: `${alt} — image ${i + 1} of ${media2.length}`,
           fill: true,
           sizes: "(max-width: 480px) 100vw, 480px",
-          className: styles$i.image,
+          className: styles$j.image,
           priority: i === 0
         })
       }, src))
     }), media2.length > 1 && jsx("div", {
-      className: styles$i.dots,
+      className: styles$j.dots,
       role: "tablist",
       "aria-label": t("Gallery pagination"),
       children: media2.map((src, i) => jsx("button", {
@@ -10174,7 +10403,7 @@ function MediaGallery({ media: media2, alt, focus }) {
         role: "tab",
         "aria-selected": i === active,
         "aria-label": `Go to image ${i + 1}`,
-        className: [styles$i.dot, i === active ? styles$i.dotActive : ""].join(" "),
+        className: [styles$j.dot, i === active ? styles$j.dotActive : ""].join(" "),
         onClick: () => goTo(i)
       }, src))
     })]
@@ -10182,7 +10411,7 @@ function MediaGallery({ media: media2, alt, focus }) {
 }
 const scrim$3 = "_scrim_r4azu_8";
 const sheet$1 = "_sheet_r4azu_2";
-const body$2 = "_body_r4azu_40";
+const body$3 = "_body_r4azu_40";
 const titles = "_titles_r4azu_67";
 const title$a = "_title_r4azu_67";
 const subtitle$3 = "_subtitle_r4azu_83";
@@ -10205,10 +10434,10 @@ const fabric = "_fabric_r4azu_328";
 const fabricLabel = "_fabricLabel_r4azu_336";
 const fabricText = "_fabricText_r4azu_344";
 const notes = "_notes_r4azu_355";
-const styles$h = {
+const styles$i = {
   scrim: scrim$3,
   sheet: sheet$1,
-  body: body$2,
+  body: body$3,
   titles,
   title: title$a,
   subtitle: subtitle$3,
@@ -10259,12 +10488,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$h.scrim,
+    className: styles$i.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$h.sheet,
+      className: styles$i.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "size-guide-title",
@@ -10273,36 +10502,36 @@ function SizeGuideSheet({ guide, onClose }) {
         onClose,
         closeLabel: t("Close size guide")
       }), jsxs("div", {
-        className: styles$h.body,
+        className: styles$i.body,
         children: [jsxs("div", {
-          className: styles$h.titles,
+          className: styles$i.titles,
           children: [jsx("h2", {
             id: "size-guide-title",
-            className: styles$h.title,
+            className: styles$i.title,
             children: guide.title
           }), guide.subtitle && jsx("p", {
-            className: styles$h.subtitle,
+            className: styles$i.subtitle,
             children: guide.subtitle
           })]
         }), hasTable && authored && unit2 && jsx("div", {
-          className: styles$h.units,
+          className: styles$i.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$h.unit} ${u === unit2 ? styles$h.unitOn : styles$h.unitOff}`,
+            className: `${styles$i.unit} ${u === unit2 ? styles$i.unitOn : styles$i.unitOff}`,
             onClick: () => setUnit(u),
             children: UNIT_LABEL[u]
           }, u))
         }), hasTable && jsx("div", {
-          className: styles$h.tableWrap,
+          className: styles$i.tableWrap,
           children: jsxs("table", {
-            className: styles$h.table,
+            className: styles$i.table,
             children: [jsx("colgroup", {
               children: columns.map((c, i) => jsx("col", {
-                className: i === 0 || i === columns.length - 1 ? styles$h.colEdge : styles$h.col
+                className: i === 0 || i === columns.length - 1 ? styles$i.colEdge : styles$i.col
               }, c))
             }), jsx("thead", {
               children: jsx("tr", {
@@ -10323,39 +10552,39 @@ function SizeGuideSheet({ guide, onClose }) {
             })]
           })
         }), guide.note && jsx("p", {
-          className: styles$h.note,
+          className: styles$i.note,
           children: guide.note
         }), measurements.length > 0 && jsxs("section", {
-          className: styles$h.how,
+          className: styles$i.how,
           "aria-labelledby": "size-guide-how",
           children: [jsx("h3", {
             id: "size-guide-how",
-            className: styles$h.howTitle,
+            className: styles$i.howTitle,
             children: t("How to measure")
           }), jsx("dl", {
-            className: styles$h.howList,
+            className: styles$i.howList,
             children: measurements.map((m) => jsxs("div", {
-              className: styles$h.howItem,
+              className: styles$i.howItem,
               children: [jsx("dt", {
-                className: styles$h.howLabel,
+                className: styles$i.howLabel,
                 children: m.label
               }), jsx("dd", {
-                className: styles$h.howText,
+                className: styles$i.howText,
                 children: m.description
               })]
             }, m.label))
           })]
         }), guide.fabric && jsxs("div", {
-          className: styles$h.fabric,
+          className: styles$i.fabric,
           children: [jsx("p", {
-            className: styles$h.fabricLabel,
+            className: styles$i.fabricLabel,
             children: t("Fabric")
           }), jsx("p", {
-            className: styles$h.fabricText,
+            className: styles$i.fabricText,
             children: guide.fabric
           })]
         }), notes2.length > 0 && jsx("ul", {
-          className: styles$h.notes,
+          className: styles$i.notes,
           children: notes2.map((n) => jsx("li", {
             children: n
           }, n))
@@ -10375,7 +10604,7 @@ const lowStock = "_lowStock_1q3xe_74";
 const error = "_error_1q3xe_84";
 const sizeGuide = "_sizeGuide_1q3xe_91";
 const info = "_info_1q3xe_115";
-const styles$g = {
+const styles$h = {
   root: root$2,
   header: header$3,
   title: title$9,
@@ -10393,22 +10622,22 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
   const [guideOpen, setGuideOpen] = useState(false);
   const showGuide = useShopFeatures().sizeCharts && guide !== void 0;
   return jsxs("section", {
-    className: styles$g.root,
+    className: styles$h.root,
     "aria-labelledby": "size-heading",
     children: [jsxs("div", {
-      className: styles$g.header,
+      className: styles$h.header,
       children: [jsx("h2", {
         id: "size-heading",
-        className: styles$g.title,
+        className: styles$h.title,
         children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
-        className: styles$g.sizeGuide,
+        className: styles$h.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
         children: [t("Size guide"), jsxs("svg", {
-          className: styles$g.info,
+          className: styles$h.info,
           width: "12",
           height: "12",
           viewBox: "0 0 12 12",
@@ -10434,7 +10663,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
         })]
       })]
     }), jsx("div", {
-      className: styles$g.chips,
+      className: styles$h.chips,
       role: "radiogroup",
       "aria-label": t("Size"),
       "aria-required": "true",
@@ -10447,7 +10676,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
           "aria-checked": isSelected,
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
-          className: [styles$g.chip, isSelected ? styles$g.selected : "", disabled2 ? styles$g.disabled : ""].filter(Boolean).join(" "),
+          className: [styles$h.chip, isSelected ? styles$h.selected : "", disabled2 ? styles$h.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(size.value),
           children: [size.value, disabled2 && jsx("span", {
             className: "visually-hidden",
@@ -10456,11 +10685,11 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
         }, size.value);
       })
     }), error2 && jsx("p", {
-      className: styles$g.error,
+      className: styles$h.error,
       role: "alert",
       children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
-      className: styles$g.lowStock,
+      className: styles$h.lowStock,
       role: "status",
       children: lowStock2
     }), showGuide && guideOpen && jsx(SizeGuideSheet, {
@@ -10477,11 +10706,11 @@ const tiles = "_tiles_1h4ny_28";
 const tile = "_tile_1h4ny_28";
 const selected$1 = "_selected_1h4ny_52";
 const media = "_media_1h4ny_36";
-const image$3 = "_image_1h4ny_64";
+const image$4 = "_image_1h4ny_64";
 const placeholder = "_placeholder_1h4ny_68";
 const scrim$2 = "_scrim_1h4ny_76";
 const stockBadge = "_stockBadge_1h4ny_95";
-const styles$f = {
+const styles$g = {
   root: root$1,
   header: header$2,
   title: title$8,
@@ -10490,7 +10719,7 @@ const styles$f = {
   tile,
   selected: selected$1,
   media,
-  image: image$3,
+  image: image$4,
   placeholder,
   scrim: scrim$2,
   stockBadge
@@ -10498,20 +10727,20 @@ const styles$f = {
 function ColorSelector({ colours, selected: selected2, onSelect }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$f.root,
+    className: styles$g.root,
     "aria-labelledby": "colour-heading",
     children: [jsxs("p", {
-      className: styles$f.header,
+      className: styles$g.header,
       children: [jsx("span", {
         id: "colour-heading",
-        className: styles$f.title,
+        className: styles$g.title,
         children: "Color:"
       }), " ", jsx("span", {
-        className: styles$f.value,
+        className: styles$g.value,
         children: selected2 ?? "Select"
       })]
     }), jsx("div", {
-      className: styles$f.tiles,
+      className: styles$g.tiles,
       role: "radiogroup",
       "aria-label": t("Color"),
       "aria-required": "true",
@@ -10524,26 +10753,26 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           role: "radio",
           "aria-checked": isSelected,
           "aria-label": `${c.value}${soldOut ? " (out of stock)" : ""}`,
-          className: [styles$f.tile, isSelected ? styles$f.selected : ""].filter(Boolean).join(" "),
+          className: [styles$g.tile, isSelected ? styles$g.selected : ""].filter(Boolean).join(" "),
           onClick: () => onSelect(c.value),
           children: [jsxs("span", {
-            className: styles$f.media,
+            className: styles$g.media,
             children: [c.image ? jsx(ShopImage, {
               src: c.image,
               alt: "",
               fill: true,
               sizes: "79px",
-              className: styles$f.image
+              className: styles$g.image
             }) : jsx("span", {
-              className: styles$f.placeholder,
+              className: styles$g.placeholder,
               "aria-hidden": "true"
             }), soldOut && jsx("span", {
-              className: styles$f.scrim,
+              className: styles$g.scrim,
               "aria-hidden": "true",
               children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
-            className: styles$f.stockBadge,
+            className: styles$g.stockBadge,
             "aria-hidden": "true",
             children: t("{0} left", c.remaining)
           })]
@@ -10558,7 +10787,7 @@ const options = "_options_1mnz1_16";
 const option = "_option_1mnz1_16";
 const selected = "_selected_1mnz1_36";
 const disabled = "_disabled_1mnz1_42";
-const styles$e = {
+const styles$f = {
   fieldset,
   legend,
   options,
@@ -10576,12 +10805,12 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     return values.length > 0 ? values.join(" · ") : variant.sku;
   }
   return jsxs("fieldset", {
-    className: styles$e.fieldset,
+    className: styles$f.fieldset,
     children: [jsx("legend", {
-      className: styles$e.legend,
+      className: styles$f.legend,
       children: t("Select an option")
     }), jsx("div", {
-      className: styles$e.options,
+      className: styles$f.options,
       role: "radiogroup",
       "aria-label": t("Variant"),
       children: variants.map((variant) => {
@@ -10593,7 +10822,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           "aria-checked": selected2,
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
-          className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
+          className: [styles$f.option, selected2 ? styles$f.selected : "", disabled2 ? styles$f.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
           children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
@@ -10607,15 +10836,15 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
 const root = "_root_9cj0g_2";
 const group = "_group_9cj0g_8";
 const title$7 = "_title_9cj0g_14";
-const body$1 = "_body_9cj0g_22";
+const body$2 = "_body_9cj0g_22";
 const paragraph = "_paragraph_9cj0g_26";
 const clamped = "_clamped_9cj0g_46";
 const toggle = "_toggle_9cj0g_51";
-const styles$d = {
+const styles$e = {
   root,
   group,
   title: title$7,
-  body: body$1,
+  body: body$2,
   paragraph,
   clamped,
   toggle
@@ -10649,25 +10878,25 @@ function ProductDetails({ description: description2 }) {
   const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
-    className: styles$d.root,
+    className: styles$e.root,
     "aria-labelledby": "details-heading",
     children: [jsxs("div", {
-      className: styles$d.group,
+      className: styles$e.group,
       children: [jsx("h2", {
         id: "details-heading",
-        className: styles$d.title,
+        className: styles$e.title,
         children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
-        className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
+        className: [styles$e.body, expanded ? "" : styles$e.clamped].join(" "),
         children: paragraphs.map((p) => jsx("p", {
-          className: styles$d.paragraph,
+          className: styles$e.paragraph,
           children: p
         }, p))
       })]
     }), clipped ? jsx("button", {
       type: "button",
-      className: styles$d.toggle,
+      className: styles$e.toggle,
       "aria-expanded": expanded,
       onClick: () => setExpanded((v) => !v),
       children: expanded ? t("Less") : t("more")
@@ -10676,7 +10905,7 @@ function ProductDetails({ description: description2 }) {
 }
 const row$3 = "_row_l4edh_1";
 const badge$1 = "_badge_l4edh_11";
-const styles$c = {
+const styles$d = {
   row: row$3,
   badge: badge$1
 };
@@ -10684,9 +10913,9 @@ function PdpBadges({ badges }) {
   const flags = badges.filter((b) => b.trim().length > 0);
   if (flags.length === 0) return null;
   return jsx("ul", {
-    className: styles$c.row,
+    className: styles$d.row,
     children: flags.map((flag) => jsx("li", {
-      className: styles$c.badge,
+      className: styles$d.badge,
       children: flag
     }, flag))
   });
@@ -10695,7 +10924,7 @@ const banner = "_banner_1xvw4_2";
 const message = "_message_1xvw4_14";
 const icon$1 = "_icon_1xvw4_22";
 const timer = "_timer_1xvw4_27";
-const styles$b = {
+const styles$c = {
   banner,
   message,
   icon: icon$1,
@@ -10719,11 +10948,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$b.banner,
+    className: styles$c.banner,
     children: [jsxs("span", {
-      className: styles$b.message,
+      className: styles$c.message,
       children: [jsxs("svg", {
-        className: styles$b.icon,
+        className: styles$c.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -10745,7 +10974,7 @@ function PromoBanner({ promo: promo2 }) {
         })]
       }), promo2.message]
     }), showTimer && jsxs("span", {
-      className: styles$b.timer,
+      className: styles$c.timer,
       children: [jsxs("svg", {
         width: "16",
         height: "16",
@@ -10778,7 +11007,7 @@ const title$6 = "_title_1hv16_34";
 const availability = "_availability_1hv16_55";
 const low = "_low_1hv16_62";
 const oos = "_oos_1hv16_66";
-const styles$a = {
+const styles$b = {
   page,
   content,
   intro,
@@ -10789,7 +11018,7 @@ const styles$a = {
   low,
   oos
 };
-function ProductDetail({ product, inventory: inventory2, recommendations = [] }) {
+function ProductDetail({ product, inventory: inventory2, recommendations = [], claim }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -10948,6 +11177,17 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     }
     return selectedSku !== null;
   }
+  async function handleClaim() {
+    if (!claim || !ensureSelection()) return;
+    const sku = selectedSku;
+    if (!sku) return;
+    setBusy("claim");
+    try {
+      await claim(sku);
+    } finally {
+      setBusy(null);
+    }
+  }
   async function handleAdd() {
     if (!ensureSelection()) return;
     const sku = selectedSku;
@@ -10974,9 +11214,19 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const available = selectedVariant?.available ?? inventory2?.available ?? 0;
   const lowStock2 = isLowStock(available);
   const sizeLowStock = lowStock2 && hasSizes && selectedSize ? t("Only {0} left in {1} size", available, selectedSize) : void 0;
-  const stockNotice = !purchasable || lowStock2 && !sizeLowStock;
+  const stockNotice = claim ? purchasable && lowStock2 && !sizeLowStock : !purchasable || lowStock2 && !sizeLowStock;
   const availabilityLabel = !purchasable ? t("Out of stock") : lowStock2 ? t("Only {0} left", available) : "";
-  const cta2 = purchasable ? jsx(Button, {
+  const cta2 = claim ? purchasable ? jsx(Button, {
+    variant: "primary",
+    onClick: handleClaim,
+    loading: busy === "claim",
+    disabled: busy !== null,
+    children: t("Claim yours")
+  }) : jsx(Button, {
+    variant: "primary",
+    disabled: true,
+    children: t("Sold out")
+  }) : purchasable ? jsx(Button, {
     variant: "primary",
     onClick: inCart ? openCart : handleAdd,
     loading: busy === "add",
@@ -10996,7 +11246,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   return jsxs(ShopSurface, {
     tone: "light",
     fill: true,
-    className: styles$a.page,
+    className: styles$b.page,
     children: [jsx(MediaGallery, {
       media: media2,
       alt: product.title,
@@ -11004,31 +11254,34 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         focus
       } : {}
     }), jsxs("div", {
-      className: styles$a.content,
+      className: styles$b.content,
       children: [jsxs("div", {
-        className: styles$a.intro,
+        className: styles$b.intro,
         children: [jsx(PdpBadges, {
           badges: product.badges ?? []
         }), jsxs("div", {
-          className: styles$a.productInfo,
+          className: styles$b.productInfo,
           children: [jsxs("div", {
-            className: styles$a.titlePrice,
+            className: styles$b.titlePrice,
             children: [jsx("h1", {
-              className: styles$a.title,
+              className: styles$b.title,
               children: product.title
             }), jsx(PriceBlock, {
-              price: product.price,
-              compareAt: product.compare_at,
+              price: claim ? {
+                amount: 0,
+                currency: product.price.currency
+              } : product.price,
+              compareAt: claim ? product.price : product.compare_at,
               size: "md",
               variant: "badge",
               align: "center"
             })]
-          }), product.promo && jsx(PromoBanner, {
+          }), product.promo && !claim && jsx(PromoBanner, {
             promo: product.promo
           })]
         })]
       }), stockNotice && jsx("p", {
-        className: [styles$a.availability, anyInStock ? styles$a.low : styles$a.oos].join(" "),
+        className: [styles$b.availability, anyInStock ? styles$b.low : styles$b.oos].join(" "),
         role: "status",
         children: availabilityLabel
       }), hasColours && jsx("div", {
@@ -11056,7 +11309,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         onSelect: setGenericSku
       }), jsx(ShippingInfo, {}), product.description && jsx(ProductDetails, {
         description: product.description
-      }), jsx(RailCarousel, {
+      }), !claim && jsx(RailCarousel, {
         title: t("You may also like"),
         products: recommendations.filter((p) => p.sku !== product.sku),
         inset: true
@@ -11066,20 +11319,20 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_1tiqx_10";
-const image$2 = "_image_1tiqx_42";
+const hero$2 = "_hero_1tiqx_10";
+const image$3 = "_image_1tiqx_42";
 const scrim$1 = "_scrim_1tiqx_70";
 const fade = "_fade_1tiqx_94";
-const text$2 = "_text_1tiqx_108";
+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$9 = {
-  hero: hero$1,
-  image: image$2,
+const styles$a = {
+  hero: hero$2,
+  image: image$3,
   scrim: scrim$1,
   fade,
-  text: text$2,
+  text: text$3,
   title: title$5,
   subtitle: subtitle$2,
   noImage
@@ -11090,10 +11343,10 @@ function PcpHero({ hero: hero2 }) {
   const t = useT();
   return jsxs("section", {
     ref: heroRef,
-    className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
+    className: [styles$a.hero, hero2.image ? "" : styles$a.noImage].join(" "),
     children: [hero2.image && jsxs(Fragment, {
       children: [jsx("div", {
-        className: styles$9.image,
+        className: styles$a.image,
         children: jsx(ShopImage, {
           src: hero2.image,
           alt: "",
@@ -11102,35 +11355,35 @@ function PcpHero({ hero: hero2 }) {
           priority: true
         })
       }), jsx("div", {
-        className: styles$9.scrim,
+        className: styles$a.scrim,
         "aria-hidden": "true"
       }), jsx("div", {
-        className: styles$9.fade,
+        className: styles$a.fade,
         "aria-hidden": "true"
       })]
     }), jsxs("div", {
-      className: styles$9.text,
+      className: styles$a.text,
       children: [jsx("h1", {
-        className: styles$9.title,
+        className: styles$a.title,
         children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
-        className: styles$9.subtitle,
+        className: styles$a.subtitle,
         children: t(hero2.subtitle)
       })]
     })]
   });
 }
-const text$1 = "_text_1saw4_6";
+const text$2 = "_text_1saw4_6";
 const center = "_center_1saw4_18";
 const left = "_left_1saw4_23";
-const styles$8 = {
-  text: text$1,
+const styles$9 = {
+  text: text$2,
   center,
   left
 };
 function LifestyleText({ text: text2, align = "center" }) {
   return jsx("p", {
-    className: [styles$8.text, align === "left" ? styles$8.left : styles$8.center].join(" "),
+    className: [styles$9.text, align === "left" ? styles$9.left : styles$9.center].join(" "),
     children: text2
   });
 }
@@ -11138,16 +11391,16 @@ const wrap = "_wrap_79nr3_10";
 const box = "_box_79nr3_14";
 const track$1 = "_track_79nr3_23";
 const slide = "_slide_79nr3_39";
-const image$1 = "_image_79nr3_46";
+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$7 = {
+const styles$8 = {
   wrap,
   box,
   track: track$1,
   slide,
-  image: image$1,
+  image: image$2,
   dots: dots$1,
   dot: dot$1,
   dotActive: dotActive$1
@@ -11166,36 +11419,36 @@ function LifestyleImage({ images, videos }) {
   }, []);
   if (images.length === 0) return null;
   return jsx("div", {
-    className: styles$7.wrap,
+    className: styles$8.wrap,
     children: jsxs("div", {
-      className: styles$7.box,
+      className: styles$8.box,
       children: [jsx("ul", {
-        className: styles$7.track,
+        className: styles$8.track,
         ref: trackRef,
         children: images.map((src, i) => {
           const clip = videos?.[i];
           return jsx("li", {
-            className: styles$7.slide,
+            className: styles$8.slide,
             children: clip ? jsx(ShopVideo, {
               src: clip,
               poster: src,
               fill: true,
-              className: styles$7.image
+              className: styles$8.image
             }) : jsx(ShopImage, {
               src,
               alt: "",
               fill: true,
               sizes: "(max-width: 480px) 100vw, 480px",
-              className: styles$7.image,
+              className: styles$8.image,
               priority: i === 0
             })
           }, src);
         })
       }), images.length > 1 && jsx("div", {
-        className: styles$7.dots,
+        className: styles$8.dots,
         "aria-hidden": "true",
         children: images.map((src, i) => jsx("span", {
-          className: [styles$7.dot, i === active ? styles$7.dotActive : ""].join(" ")
+          className: [styles$8.dot, i === active ? styles$8.dotActive : ""].join(" ")
         }, src))
       })]
     })
@@ -11209,7 +11462,7 @@ const author = "_author_qsxtq_58";
 const dots = "_dots_qsxtq_69";
 const dot = "_dot_qsxtq_69";
 const dotActive = "_dotActive_qsxtq_85";
-const styles$6 = {
+const styles$7 = {
   section: section$2,
   track,
   card,
@@ -11233,26 +11486,26 @@ function ReviewCarousel({ quotes }) {
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
   return jsxs("section", {
-    className: styles$6.section,
+    className: styles$7.section,
     "aria-label": t("Reviews"),
     children: [jsx("ul", {
-      className: styles$6.track,
+      className: styles$7.track,
       ref: trackRef,
       children: quotes.map((q, i) => jsxs("li", {
-        className: styles$6.card,
+        className: styles$7.card,
         children: [jsxs("blockquote", {
-          className: styles$6.quote,
+          className: styles$7.quote,
           children: ["“", q.quote, "”"]
         }), jsx("p", {
-          className: styles$6.author,
+          className: styles$7.author,
           children: q.author
         })]
       }, i))
     }), quotes.length > 1 && jsx("div", {
-      className: styles$6.dots,
+      className: styles$7.dots,
       "aria-hidden": "true",
       children: quotes.map((_, i) => jsx("span", {
-        className: [styles$6.dot, i === active ? styles$6.dotActive : ""].join(" ")
+        className: [styles$7.dot, i === active ? styles$7.dotActive : ""].join(" ")
       }, i))
     })]
   });
@@ -11260,25 +11513,25 @@ function ReviewCarousel({ quotes }) {
 const section$1 = "_section_1nrsi_1";
 const row$2 = "_row_1nrsi_9";
 const title$4 = "_title_1nrsi_20";
-const body = "_body_1nrsi_43";
-const styles$5 = {
+const body$1 = "_body_1nrsi_43";
+const styles$6 = {
   section: section$1,
   row: row$2,
   title: title$4,
-  body
+  body: body$1
 };
 function WhyUs({ items: items2 }) {
   const t = useT();
   return jsx("section", {
-    className: styles$5.section,
+    className: styles$6.section,
     "aria-label": t("Why shop with us"),
     children: items2.map((it, i) => jsxs("div", {
-      className: styles$5.row,
+      className: styles$6.row,
       children: [jsx("p", {
-        className: styles$5.title,
+        className: styles$6.title,
         children: it.title
       }), jsx("p", {
-        className: styles$5.body,
+        className: styles$6.body,
         children: it.body
       })]
     }, i))
@@ -11288,7 +11541,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$4 = {
+const styles$5 = {
   section,
   title: title$3,
   list: list$1,
@@ -11297,17 +11550,17 @@ const styles$4 = {
 function ExploreList({ title: title2, links }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$4.section,
+    className: styles$5.section,
     "aria-label": title2,
     children: [jsx("h2", {
-      className: styles$4.title,
+      className: styles$5.title,
       children: title2
     }), jsx("ul", {
-      className: styles$4.list,
+      className: styles$5.list,
       children: links.map((l) => jsx("li", {
         children: jsxs(ShopLink, {
           to: `/category/${encodeURIComponent(l.code)}`,
-          className: styles$4.row,
+          className: styles$5.row,
           children: [jsx("span", {
             children: t(l.label)
           }), jsx("svg", {
@@ -11335,7 +11588,7 @@ const featured = "_featured_1kft8_36";
 const gridBlock = "_gridBlock_1kft8_37";
 const blockTitle = "_blockTitle_1kft8_44";
 const grid = "_grid_1kft8_37";
-const styles$3 = {
+const styles$4 = {
   pcp,
   blocks,
   featured,
@@ -11358,9 +11611,9 @@ function Block({ block }) {
       });
     case "featured":
       return jsxs("div", {
-        className: styles$3.featured,
+        className: styles$4.featured,
         children: [block.title && jsx("h2", {
-          className: styles$3.blockTitle,
+          className: styles$4.blockTitle,
           children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
@@ -11380,12 +11633,12 @@ function Block({ block }) {
       });
     case "grid":
       return jsxs("div", {
-        className: styles$3.gridBlock,
+        className: styles$4.gridBlock,
         children: [block.title && jsx("h2", {
-          className: styles$3.blockTitle,
+          className: styles$4.blockTitle,
           children: t(block.title)
         }), jsx("ul", {
-          className: styles$3.grid,
+          className: styles$4.grid,
           children: block.products.map((p) => jsx("li", {
             children: jsx(ProductTile, {
               product: p
@@ -11414,11 +11667,11 @@ function CategoryContent({ page: page2 }) {
   return jsxs(ShopSurface, {
     tone: "dark",
     fill: true,
-    className: styles$3.pcp,
+    className: styles$4.pcp,
     children: [jsx(PcpHero, {
       hero: page2.hero
     }), jsx("div", {
-      className: styles$3.blocks,
+      className: styles$4.blocks,
       children: page2.blocks.map((block, i) => jsx(Block, {
         block
       }, i))
@@ -11592,6 +11845,216 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
+const hero$1 = "_hero_1h61y_1";
+const image$1 = "_image_1h61y_11";
+const foot = "_foot_1h61y_21";
+const text$1 = "_text_1h61y_27";
+const logo$1 = "_logo_1h61y_35";
+const copy$1 = "_copy_1h61y_40";
+const headline = "_headline_1h61y_49";
+const body = "_body_1h61y_57";
+const cta$1 = "_cta_1h61y_66";
+const styles$3 = {
+  hero: hero$1,
+  image: image$1,
+  foot,
+  text: text$1,
+  logo: logo$1,
+  copy: copy$1,
+  headline,
+  body,
+  cta: cta$1
+};
+function VipHero({ hero: hero2, onContinue }) {
+  const t = useT();
+  const assetUrl = useAssetUrl();
+  const ref = useRef(null);
+  useTopOffset(ref, "--vip-hero-top");
+  return jsx(ShopSurface, {
+    tone: "dark",
+    fill: true,
+    children: jsxs("section", {
+      ref,
+      className: styles$3.hero,
+      children: [hero2.image && jsx("div", {
+        className: styles$3.image,
+        children: jsx(ShopImage, {
+          src: hero2.image,
+          alt: "",
+          fill: true,
+          sizes: "(max-width: 480px) 100vw, 480px",
+          priority: true
+        })
+      }), jsxs("div", {
+        className: styles$3.foot,
+        children: [jsxs("div", {
+          className: styles$3.text,
+          children: [jsx("img", {
+            src: assetUrl("/figma/home/dazn-logo.svg"),
+            alt: t("DAZN"),
+            className: styles$3.logo
+          }), jsxs("div", {
+            className: styles$3.copy,
+            children: [jsx("h1", {
+              className: styles$3.headline,
+              children: hero2.headline
+            }), hero2.body && jsx("p", {
+              className: styles$3.body,
+              children: hero2.body
+            })]
+          })]
+        }), jsx("div", {
+          className: styles$3.cta,
+          children: jsx(Button, {
+            variant: "primary",
+            fullWidth: true,
+            onClick: onContinue,
+            children: hero2.cta_label
+          })
+        })]
+      })]
+    })
+  });
+}
+function VipLandingView({ token, onUnavailable }) {
+  const t = useT();
+  const { api, emit } = useShop();
+  const [load, setLoad] = useState({
+    status: "loading"
+  });
+  const emitRef = useRef(emit);
+  emitRef.current = emit;
+  useEffect(() => {
+    let live = true;
+    setLoad({
+      status: "loading"
+    });
+    api.vip.resolve(token).then((invite2) => {
+      if (live) setLoad({
+        status: "done",
+        invite: invite2
+      });
+    }).catch((err) => {
+      if (!live) return;
+      const code = codeOf(err);
+      emitRef.current({
+        type: "error",
+        code,
+        scope: "vip.resolve"
+      });
+      setLoad({
+        status: "error",
+        code
+      });
+    });
+    return () => {
+      live = false;
+    };
+  }, [api, token]);
+  if (load.status === "loading") return jsx(ScreenSkeleton, {
+    tone: "light"
+  });
+  if (load.status === "error") {
+    return jsx(ShopSurface, {
+      tone: "light",
+      fill: true,
+      children: jsx(ErrorState, {
+        code: load.code
+      })
+    });
+  }
+  const { invite } = load;
+  if (invite.state !== "active") {
+    if (onUnavailable) return jsx(Fragment, {
+      children: onUnavailable(invite.state)
+    });
+    return jsx(ShopSurface, {
+      tone: "light",
+      fill: true,
+      children: jsx(EmptyState, {
+        title: t("Item unavailable"),
+        body: t("This invitation can no longer be used.")
+      })
+    });
+  }
+  return jsx(ActiveLanding, {
+    token,
+    invite
+  });
+}
+function ActiveLanding({ token, invite }) {
+  const t = useT();
+  const toast2 = useToast();
+  const { api, emit } = useShop();
+  const product = useInPlaceScreen("vipProduct");
+  const sku = invite.items[0]?.product_sku ?? "";
+  const loaded = useProduct(sku, {
+    showRecommendations: false
+  });
+  const claim = useCallback(async (variantSku) => {
+    try {
+      const current2 = await api.cart.get().catch(() => null);
+      if (current2?.vip?.invite_ref === invite.invite_ref) {
+        for (const line2 of current2.items) await api.cart.removeItem(line2.sku);
+      }
+      const cart2 = await api.vip.addToCart({
+        token,
+        sku: variantSku,
+        qty: 1
+      });
+      emit({
+        type: "cart_updated",
+        itemCount: cart2.items.reduce((n, i) => n + i.qty, 0),
+        subtotal: cart2.totals.subtotal
+      });
+      const { checkout_url } = await api.cart.handoff();
+      emit({
+        type: "checkout_handoff",
+        cartId: cart2.cart_id,
+        url: checkout_url
+      });
+      window.location.assign(checkout_url);
+    } catch (err) {
+      const code = codeOf(err);
+      if (code === "unauthorized") {
+        emit({
+          type: "session_required",
+          action: "vip_claim"
+        });
+        return;
+      }
+      emit({
+        type: "error",
+        code,
+        scope: "vip.claim"
+      });
+      toast2.show(t(treatmentFor(code).body), "critical");
+    }
+  }, [api, emit, invite.invite_ref, t, toast2, token]);
+  if (invite.hero && product.value === null) {
+    return jsx(VipHero, {
+      hero: invite.hero,
+      onContinue: () => product.open("1")
+    });
+  }
+  if (loaded.product) {
+    return jsx(ProductDetail, {
+      product: loaded.product,
+      inventory: loaded.inventory,
+      claim
+    }, loaded.product.sku);
+  }
+  if (loaded.loading) return jsx(ScreenSkeleton, {
+    tone: "light"
+  });
+  return jsx(ShopSurface, {
+    tone: "light",
+    fill: true,
+    children: jsx(ErrorState, {
+      code: loaded.error === "sku_not_found" ? void 0 : loaded.error
+    })
+  });
+}
 const showcase = "_showcase_9ibf6_14";
 const panel = "_panel_9ibf6_40";
 const image = "_image_9ibf6_93";
@@ -11658,15 +12121,26 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
+    let at = TOP;
+    let returning = false;
+    let holding = false;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
     const top2 = () => {
-      scrollToTop();
-      if (pane) scrollToTop(pane);
+      scrollToOffset(at.doc);
+      if (pane) scrollToOffset(at.pane, pane);
     };
     let frame2 = null;
     let release = () => {
     };
     const anchor2 = () => {
       release();
+      const back = returnOffset(here());
+      returning = back !== null;
+      at = back ?? TOP;
+      holding = true;
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
@@ -11682,18 +12156,42 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      }, void 0, pane);
+      }, (end2) => {
+        holding = false;
+        if (returning && end2 === "moved") settle();
+      }, pane, at);
     };
+    let screen2 = claimScreen();
     anchor2();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";
     const onPageShow = (event) => {
-      if (event.persisted) anchor2();
+      if (event.persisted) {
+        screen2 = claimScreen();
+        anchor2();
+      }
     };
     window.addEventListener("pageshow", onPageShow);
-    const unobserve = onReveal(el, anchor2);
+    const unobserve = onReveal(el, () => {
+      screen2 = claimScreen();
+      anchor2();
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(pane);
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
+    });
     return () => {
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       unobserve();
       release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
@@ -12517,6 +13015,8 @@ export {
   StickyCtaBar,
   ToastProvider,
   VariantSelector,
+  VipHero,
+  VipLandingView,
   WhyUs,
   asApiError,
   codeOf,