@nok-integration/storefront-react 0.21.1 → 0.22.1

package/dist/index.mjs

@@ -63,8 +63,8 @@ function requireUtil() {
         return void 0;
       };
       util3.isInteger = typeof Number.isInteger === "function" ? (val) => Number.isInteger(val) : (val) => typeof val === "number" && Number.isFinite(val) && Math.floor(val) === val;
-      function joinValues(array, separator = " | ") {
-        return array.map((val) => typeof val === "string" ? `'${val}'` : val).join(separator);
+      function joinValues(array, separator2 = " | ") {
+        return array.map((val) => typeof val === "string" ? `'${val}'` : val).join(separator2);
       }
       util3.joinValues = joinValues;
       util3.jsonStringifyReplacer = (_, value2) => {
@@ -4516,6 +4516,8 @@ function requireVip() {
     });
     exports.VipHero = zod_1.z.object({
       image: common_1.Url.nullable(),
+      desktop_image: common_1.Url.nullable().optional(),
+      desktop_video: common_1.Url.nullable().optional(),
       headline: zod_1.z.string(),
       body: zod_1.z.string().nullable(),
       cta_label: zod_1.z.string()
@@ -5798,7 +5800,7 @@ function ShopLink({ to, children, ...rest }) {
     children
   });
 }
-function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, className, style, priority = false }) {
+function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes: sizes2, className, style, priority = false }) {
   const assetUrl = useAssetUrl();
   const fillStyle = fill2 ? {
     position: "absolute",
@@ -5811,7 +5813,7 @@ function ShopImage({ src, alt, fill: fill2 = false, width, height, sizes, classN
     alt,
     width: fill2 ? void 0 : width,
     height: fill2 ? void 0 : height,
-    sizes,
+    sizes: sizes2,
     className,
     style: {
       ...fillStyle,
@@ -5897,7 +5899,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$T = {
+const styles$V = {
   badge: badge$5,
   neutral: neutral$2,
   success: success$1,
@@ -5906,7 +5908,7 @@ const styles$T = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$T.badge, styles$T[tone]].join(" "),
+    className: [styles$V.badge, styles$V[tone]].join(" "),
     children
   });
 }
@@ -5915,7 +5917,7 @@ const fullWidth = "_fullWidth_ci424_25";
 const primary = "_primary_ci424_29";
 const secondary = "_secondary_ci424_34";
 const ghost = "_ghost_ci424_40";
-const styles$S = {
+const styles$U = {
   button: button$1,
   fullWidth,
   primary,
@@ -5923,12 +5925,12 @@ const styles$S = {
   ghost
 };
 const spinner = "_spinner_1rueh_5";
-const styles$R = {
+const styles$T = {
   spinner
 };
 function Spinner({ className }) {
   return jsx("span", {
-    className: [styles$R.spinner, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$T.spinner, className ?? ""].filter(Boolean).join(" "),
     "aria-hidden": "true"
   });
 }
@@ -5937,7 +5939,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$S.button, styles$S[variant], fullWidth2 ? styles$S.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$U.button, styles$U[variant], fullWidth2 ? styles$U.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
@@ -5947,7 +5949,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   });
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$Q = {
+const styles$S = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5958,13 +5960,13 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$Q.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$S.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_stwld_10";
 const fill = "_fill_stwld_35";
-const styles$P = {
+const styles$R = {
   surface: surface$1,
   fill
 };
@@ -6111,7 +6113,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$P.surface, fill2 ? styles$P.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$R.surface, fill2 ? styles$R.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -6124,7 +6126,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$O = {
+const styles$Q = {
   root: root$6,
   inner,
   media: media$3,
@@ -6331,6 +6333,10 @@ const ES = {
   "Item is damaged": "El artículo está dañado",
   "Measurement unit": "Unidad de medida",
   "Need help?": "¿Necesita ayuda?",
+  "Need help with your order?": "¿Necesita ayuda con su pedido?",
+  Homepage: "Inicio",
+  Breadcrumb: "Ruta de navegación",
+  "Show image {0} of {1}": "Ver imagen {0} de {1}",
   "Nothing left to return": "No queda nada por devolver",
   "Order #{0} · Placed {1}": "Pedido n.º {0} · Realizado el {1}",
   "Order cancelled": "Pedido cancelado",
@@ -6423,36 +6429,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$O.root,
+    className: styles$Q.root,
     children: jsx("div", {
-      className: styles$O.inner,
+      className: styles$Q.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$O.media
+          className: styles$Q.media
         }), jsxs("div", {
-          className: styles$O.lines,
+          className: styles$Q.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$O.lineWide
+            className: styles$Q.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$O.lineMid
+            className: styles$Q.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$O.lineNarrow
+            className: styles$Q.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$O.action
+          className: styles$Q.action
         })]
       }) : jsx("div", {
-        className: styles$O.lines,
+        className: styles$Q.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$O.row
+          className: styles$Q.row
         }, i))
       })
     })
@@ -6464,7 +6470,7 @@ const text$6 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
 const body$9 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$N = {
+const styles$P = {
   root: root$5,
   icon: icon$4,
   text: text$6,
@@ -6474,22 +6480,22 @@ const styles$N = {
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$N.root,
+    className: styles$P.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$N.icon,
+      className: styles$P.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$N.text,
+      className: styles$P.text,
       children: [jsx("h2", {
-        className: styles$N.title,
+        className: styles$P.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$N.body,
+        className: styles$P.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$N.action,
+      className: styles$P.action,
       children: action2
     })]
   });
@@ -6626,7 +6632,7 @@ function isDuplicateOrder(err) {
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
 const body$8 = "_body_1lbpx_15";
-const styles$M = {
+const styles$O = {
   root: root$4,
   title: title$m,
   body: body$8
@@ -6636,13 +6642,13 @@ function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$M.root,
+    className: styles$O.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$M.title,
+      className: styles$O.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$M.body,
+      className: styles$O.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -6688,9 +6694,9 @@ const success = "_success_oz4st_163";
 const critical$1 = "_critical_oz4st_168";
 const rich = "_rich_oz4st_183";
 const description = "_description_oz4st_198";
-const thumb$3 = "_thumb_oz4st_216";
+const thumb$4 = "_thumb_oz4st_216";
 const thumbImage = "_thumbImage_oz4st_227";
-const styles$L = {
+const styles$N = {
   viewport,
   anchor,
   caret,
@@ -6703,7 +6709,7 @@ const styles$L = {
   critical: critical$1,
   rich,
   description,
-  thumb: thumb$3,
+  thumb: thumb$4,
   thumbImage
 };
 const ToastContext = createContext(null);
@@ -6813,41 +6819,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$L.viewport,
+      className: styles$N.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$L.anchor,
+          className: styles$N.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$L.caret,
+            className: styles$N.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$L.toast, rich2 ? styles$L.rich : styles$L[t.tone]].join(" "),
+            className: [styles$N.toast, rich2 ? styles$N.rich : styles$N[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$L.thumb,
+              className: styles$N.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$L.thumbImage
+                className: styles$N.thumbImage
               })
             }), jsxs("span", {
-              className: styles$L.text,
+              className: styles$N.text,
               children: [jsx("span", {
-                className: styles$L.message,
+                className: styles$N.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$L.description,
+                className: styles$N.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$L.action,
+              className: styles$N.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6862,15 +6868,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$K = {
+const styles$M = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$K.badge,
+    className: styles$M.badge,
     children: [jsxs("svg", {
-      className: styles$K.icon,
+      className: styles$M.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6900,7 +6906,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$J = {
+const styles$L = {
   root: root$3,
   center: center$1,
   end,
@@ -6918,12 +6924,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$J.root, styles$J[size], styles$J[align], styles$J[variant]].join(" "),
+    className: [styles$L.root, styles$L[size], styles$L[align], styles$L[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$J.price,
+      className: styles$L.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$J.compareAt,
+      className: styles$L.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: t("Was {0}", format(compareAt2))
@@ -6937,7 +6943,7 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
   });
 }
 const STATE_KEY = "__daznShop";
-function current$1(name2) {
+function current$2(name2) {
   if (typeof window === "undefined") return null;
   const state = window.history.state;
   const ours = state?.[STATE_KEY];
@@ -6946,9 +6952,9 @@ function current$1(name2) {
   return typeof value2 === "string" ? value2 : null;
 }
 function useInPlaceScreen(name2) {
-  const [value2, setValue] = useState(() => current$1(name2));
+  const [value2, setValue] = useState(() => current$2(name2));
   useEffect(() => {
-    const onPop = () => setValue(current$1(name2));
+    const onPop = () => setValue(current$2(name2));
     window.addEventListener("popstate", onPop);
     return () => window.removeEventListener("popstate", onPop);
   }, [name2]);
@@ -6968,7 +6974,7 @@ function useInPlaceScreen(name2) {
     setValue(next);
   }, [name2]);
   const close2 = useCallback(() => {
-    if (current$1(name2) !== null) {
+    if (current$2(name2) !== null) {
       window.history.back();
       return;
     }
@@ -6990,10 +6996,10 @@ const connector = "_connector_1cum7_68";
 const text$4 = "_text_1cum7_84";
 const label$2 = "_label_1cum7_101";
 const past = "_past_1cum7_113";
-const current = "_current_1cum7_118";
+const current$1 = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$I = {
+const styles$K = {
   timeline,
   row: row$8,
   line: line$3,
@@ -7004,7 +7010,7 @@ const styles$I = {
   text: text$4,
   label: label$2,
   past,
-  current,
+  current: current$1,
   future,
   date: date$1
 };
@@ -7027,39 +7033,39 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$I.timeline,
+    className: styles$K.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$I.row,
+        className: styles$K.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$I.line,
+          className: styles$K.line,
           children: [jsx("span", {
-            className: styles$I.marker,
+            className: styles$K.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$I.pending,
+              className: styles$K.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$I.text,
+            className: styles$K.text,
             children: [jsx("span", {
-              className: [styles$I.label, styles$I[state]].join(" "),
+              className: [styles$K.label, styles$K[state]].join(" "),
               children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
-              className: styles$I.date,
+              className: styles$K.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$I.date,
+              className: styles$K.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$I.connector,
+          className: styles$K.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -7073,7 +7079,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$I.tick,
+    className: styles$K.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -7218,7 +7224,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$H = {
+const styles$J = {
   summary,
   row: row$7,
   free,
@@ -7247,11 +7253,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$H.summary,
+    className: styles$J.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$H.row, styles$H.discount].join(" "),
+          className: [styles$J.row, styles$J.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -7261,11 +7267,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$H.row,
+        className: styles$J.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$H.pending : void 0,
+          className: pending2 ? styles$J.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -7275,7 +7281,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$H.free,
+      className: styles$J.free,
       children: t("Free")
     });
   }
@@ -7283,8 +7289,8 @@ 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$a = "_image_1lx0d_44";
+const thumb$3 = "_thumb_1lx0d_34";
+const image$b = "_image_1lx0d_44";
 const placeholder$8 = "_placeholder_1lx0d_51";
 const lineBody = "_lineBody_1lx0d_56";
 const lineText = "_lineText_1lx0d_65";
@@ -7302,11 +7308,11 @@ const itemsHeader = "_itemsHeader_1lx0d_14";
 const itemsTitle = "_itemsTitle_1lx0d_238";
 const itemsCount = "_itemsCount_1lx0d_249";
 const cardLines = "_cardLines_1lx0d_268";
-const styles$G = {
+const styles$I = {
   lines: lines$1,
   line: line$2,
-  thumb: thumb$2,
-  image: image$a,
+  thumb: thumb$3,
+  image: image$b,
   placeholder: placeholder$8,
   lineBody,
   lineText,
@@ -7345,42 +7351,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$G.line,
+    className: styles$I.line,
     children: [jsx("div", {
-      className: styles$G.thumb,
+      className: styles$I.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$G.image
+        className: styles$I.image
       }) : jsx("div", {
-        className: styles$G.placeholder,
+        className: styles$I.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$G.lineBody,
+      className: styles$I.lineBody,
       children: [jsxs("div", {
-        className: styles$G.lineText,
+        className: styles$I.lineText,
         children: [jsx("span", {
-          className: styles$G.lineTitle,
+          className: styles$I.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$G.lineMeta,
+          className: styles$I.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$G.detail,
+            className: styles$I.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$G.linePrice,
+        className: styles$I.linePrice,
         children: [jsx("span", {
-          className: styles$G.paid,
+          className: styles$I.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$G.was,
+          className: styles$I.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: t("Was {0}", format(compareAt2))
@@ -7396,7 +7402,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$G.lines,
+    className: styles$I.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -7407,19 +7413,19 @@ function OrderItemsCard({ order }) {
   const t = useT();
   const itemCount = order.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("section", {
-    className: styles$G.card,
+    className: styles$I.card,
     "aria-label": t("Items"),
     children: [jsxs("div", {
-      className: styles$G.itemsHeader,
+      className: styles$I.itemsHeader,
       children: [jsx("h2", {
-        className: styles$G.itemsTitle,
+        className: styles$I.itemsTitle,
         children: t("Items")
       }), jsx("span", {
-        className: styles$G.itemsCount,
+        className: styles$I.itemsCount,
         children: itemCount
       })]
     }), jsx("ul", {
-      className: [styles$G.lines, styles$G.cardLines].join(" "),
+      className: [styles$I.lines, styles$I.cardLines].join(" "),
       children: order.items.map((item2) => jsx(OrderLine, {
         item: item2
       }, item2.line_ref))
@@ -7429,13 +7435,13 @@ function OrderItemsCard({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$G.card,
+    className: styles$I.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$G.cardTitle,
+      className: styles$I.cardTitle,
       children: t("Shipping address")
     }), jsx("p", {
-      className: styles$G.cardBody,
+      className: styles$I.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -7443,10 +7449,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$G.card, styles$G.summaryCard].join(" "),
+    className: [styles$I.card, styles$I.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$G.cardTitle,
+      className: styles$I.cardTitle,
       children: t("Order summary")
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -7483,7 +7489,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$F = {
+const styles$H = {
   header: header$6,
   slot,
   handleSlot,
@@ -7511,23 +7517,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$F.header,
+    className: styles$H.header,
     children: [jsx("div", {
-      className: styles$F.slot,
+      className: styles$H.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$F.handleSlot,
+      className: styles$H.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$F.handle
+        className: styles$H.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$F.closeSlot,
+      className: styles$H.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$F.close,
+        className: styles$H.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -7583,7 +7589,7 @@ const radio = "_radio_1oaa3_95";
 const label$1 = "_label_1oaa3_125";
 const footer$1 = "_footer_1oaa3_134";
 const error$1 = "_error_1oaa3_142";
-const styles$E = {
+const styles$G = {
   scrim: scrim$5,
   sheet: sheet$3,
   body: body$7,
@@ -7601,12 +7607,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const t = useT();
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$E.scrim,
+    className: styles$G.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$E.sheet,
+      className: styles$G.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -7615,23 +7621,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$E.body,
+        className: styles$G.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$E.title,
+          className: styles$G.title,
           children: t(title2)
         }), jsx("div", {
-          className: styles$E.options,
+          className: styles$G.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$E.option,
+            className: styles$G.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$E.radio,
+              className: styles$G.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -7652,15 +7658,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$E.label,
+              className: styles$G.label,
               children: t(o.label)
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$E.footer,
+        className: styles$G.footer,
         children: [error2 && jsx("p", {
-          className: styles$E.error,
+          className: styles$G.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -7676,7 +7682,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   });
 }
 const line$1 = "_line_1pjby_6";
-const thumb$1 = "_thumb_1pjby_12";
+const thumb$2 = "_thumb_1pjby_12";
 const img$1 = "_img_1pjby_22";
 const placeholder$7 = "_placeholder_1pjby_29";
 const meta$3 = "_meta_1pjby_34";
@@ -7685,9 +7691,9 @@ 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$D = {
+const styles$F = {
   line: line$1,
-  thumb: thumb$1,
+  thumb: thumb$2,
   img: img$1,
   placeholder: placeholder$7,
   meta: meta$3,
@@ -7701,35 +7707,35 @@ function ReturnItemRow({ item: item2, className }) {
   const { format } = useMoney();
   const t = useT();
   return jsxs("div", {
-    className: [styles$D.line, className ?? ""].join(" ").trim(),
+    className: [styles$F.line, className ?? ""].join(" ").trim(),
     children: [jsx("div", {
-      className: styles$D.thumb,
+      className: styles$F.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$D.img
+        className: styles$F.img
       }) : jsx("div", {
-        className: styles$D.placeholder,
+        className: styles$F.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$D.meta,
+      className: styles$F.meta,
       children: [jsx("p", {
-        className: styles$D.name,
+        className: styles$F.name,
         children: item2.title ?? item2.sku
       }), item2.attributes?.size && jsx("p", {
-        className: styles$D.attrs,
+        className: styles$F.attrs,
         children: t("Size: {0}", item2.attributes.size)
       })]
     }), jsxs("div", {
-      className: styles$D.price,
+      className: styles$F.price,
       children: [jsx("span", {
-        className: styles$D.paid,
+        className: styles$F.paid,
         children: format(item2.unit_price)
       }), item2.compare_at_unit_price && jsxs("span", {
-        className: styles$D.was,
+        className: styles$F.was,
         children: [jsx("span", {
           className: "visually-hidden",
           children: t("Was {0}", format(item2.compare_at_unit_price))
@@ -7752,7 +7758,7 @@ const check = "_check_15fz5_66";
 const row$6 = "_row_15fz5_110";
 const reason = "_reason_15fz5_135";
 const reasonSet = "_reasonSet_15fz5_155";
-const styles$C = {
+const styles$E = {
   page: page$6,
   titles: titles$2,
   title: title$k,
@@ -7859,55 +7865,55 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   }
   if (returnable.length === 0) {
     return jsx("div", {
-      className: styles$C.page,
+      className: styles$E.page,
       children: jsxs("div", {
-        className: styles$C.titles,
+        className: styles$E.titles,
         children: [jsx("h1", {
-          className: styles$C.title,
+          className: styles$E.title,
           children: t("Nothing left to return")
         }), jsx("p", {
-          className: styles$C.subtitle,
+          className: styles$E.subtitle,
           children: t("Every item on this order has already been returned or cancelled.")
         })]
       })
     });
   }
   return jsxs("div", {
-    className: styles$C.page,
+    className: styles$E.page,
     children: [jsxs("div", {
-      className: styles$C.titles,
+      className: styles$E.titles,
       children: [jsx("h1", {
-        className: styles$C.title,
+        className: styles$E.title,
         children: t("What do you want to return?")
       }), jsx("p", {
-        className: styles$C.subtitle,
+        className: styles$E.subtitle,
         children: t("Select items you want to return")
       })]
     }), jsx("div", {
-      className: styles$C.list,
+      className: styles$E.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$C.card,
+          className: styles$E.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$C.checkSlot,
+            className: styles$E.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$C.check,
+              className: styles$E.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$C.row,
+            className: styles$E.row,
             children: [jsx(ReturnItemRow, {
               item: item2
             }), jsxs("button", {
               type: "button",
-              className: `${styles$C.reason} ${reason2 ? styles$C.reasonSet : ""}`,
+              className: `${styles$E.reason} ${reason2 ? styles$E.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7959,7 +7965,7 @@ const body$6 = "_body_51f4e_113";
 const body2 = "_body2_51f4e_121";
 const download = "_download_51f4e_139";
 const note$1 = "_note_51f4e_161";
-const styles$B = {
+const styles$D = {
   page: page$5,
   top,
   items: items$2,
@@ -8033,42 +8039,42 @@ function ReturnLabelView({ ret, onDone }) {
   const t = useT();
   const { preparing, unavailable, onDownload } = useLabelDownload(ret.label_url);
   return jsxs("div", {
-    className: styles$B.page,
+    className: styles$D.page,
     children: [jsxs("div", {
-      className: styles$B.top,
+      className: styles$D.top,
       children: [jsx("div", {
-        className: styles$B.items,
+        className: styles$D.items,
         children: ret.items.map((item2) => jsx(ReturnItemRow, {
           item: item2
         }, item2.line_ref))
       }), jsxs("div", {
-        className: styles$B.intro,
+        className: styles$D.intro,
         children: [jsx("h1", {
-          className: styles$B.title,
+          className: styles$D.title,
           children: t("We’ve generated your return label")
         }), jsx("p", {
-          className: styles$B.subtitle,
+          className: styles$D.subtitle,
           children: t("Follow the instructions below to complete your return")
         })]
       }), jsxs("div", {
-        className: styles$B.card,
+        className: styles$D.card,
         children: [jsxs("section", {
-          className: styles$B.step,
+          className: styles$D.step,
           children: [jsxs("div", {
-            className: styles$B.stepHead,
+            className: styles$D.stepHead,
             children: [jsx("span", {
-              className: styles$B.number,
+              className: styles$D.number,
               "aria-hidden": "true",
               children: "1"
             }), jsx("h2", {
-              className: styles$B.stepTitle,
+              className: styles$D.stepTitle,
               children: t("Download your return label")
             })]
           }), jsx("p", {
-            className: styles$B.body,
+            className: styles$D.body,
             children: t("Tap the button below to download your pre-paid return label")
           }), ret.label_url && jsxs("a", {
-            className: styles$B.download,
+            className: styles$D.download,
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
@@ -8080,27 +8086,27 @@ function ReturnLabelView({ ret, onDone }) {
               children: ` ${t("(opens in a new tab)")}`
             })]
           }), unavailable && jsx("p", {
-            className: styles$B.note,
+            className: styles$D.note,
             role: "status",
             children: t("Your return label is not ready yet. Try again in a moment.")
           }), ret.label_email && jsxs("p", {
-            className: styles$B.note,
+            className: styles$D.note,
             children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
           })]
         }), jsxs("section", {
-          className: styles$B.step2,
+          className: styles$D.step2,
           children: [jsxs("div", {
-            className: styles$B.stepHead,
+            className: styles$D.stepHead,
             children: [jsx("span", {
-              className: styles$B.number,
+              className: styles$D.number,
               "aria-hidden": "true",
               children: "2"
             }), jsx("h2", {
-              className: styles$B.stepTitle,
+              className: styles$D.stepTitle,
               children: t("Pack and ship the item")
             })]
           }), jsxs("p", {
-            className: styles$B.body2,
+            className: styles$D.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.")]
           })]
         })]
@@ -8119,7 +8125,7 @@ const title$i = "_title_g4vus_15";
 const subtitle$5 = "_subtitle_g4vus_35";
 const items$1 = "_items_g4vus_43";
 const item$1 = "_item_g4vus_43";
-const thumb = "_thumb_g4vus_58";
+const thumb$1 = "_thumb_g4vus_58";
 const img = "_img_g4vus_68";
 const placeholder$6 = "_placeholder_g4vus_75";
 const meta$2 = "_meta_g4vus_80";
@@ -8128,14 +8134,14 @@ 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$A = {
+const styles$C = {
   page: page$4,
   titles: titles$1,
   title: title$i,
   subtitle: subtitle$5,
   items: items$1,
   item: item$1,
-  thumb,
+  thumb: thumb$1,
   img,
   placeholder: placeholder$6,
   meta: meta$2,
@@ -8162,42 +8168,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$A.page,
+      className: styles$C.page,
       children: [jsxs("div", {
-        className: styles$A.titles,
+        className: styles$C.titles,
         children: [jsx("h1", {
-          className: styles$A.title,
+          className: styles$C.title,
           children: t("Return in progress")
         }), jsx("p", {
-          className: styles$A.subtitle,
+          className: styles$C.subtitle,
           children: t("Return #{0} · Reported {1}", ret.return_ref, reported)
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$A.items,
+        className: styles$C.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$A.item,
+          className: styles$C.item,
           children: [jsx("div", {
-            className: styles$A.thumb,
+            className: styles$C.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$A.img
+              className: styles$C.img
             }) : jsx("div", {
-              className: styles$A.placeholder,
+              className: styles$C.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$A.meta,
+            className: styles$C.meta,
             children: [jsx("p", {
-              className: styles$A.name,
+              className: styles$C.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$A.attrs,
+              className: styles$C.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: t("Size: {0}", item2.attributes.size)
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -8205,12 +8211,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$A.price,
+            className: styles$C.price,
             children: [jsx("span", {
-              className: styles$A.paid,
+              className: styles$C.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$A.was,
+              className: styles$C.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -8332,7 +8338,7 @@ const titleRow = "_titleRow_1iwin_26";
 const headline$2 = "_headline_1iwin_42";
 const track$5 = "_track_1iwin_74";
 const rule$1 = "_rule_1iwin_99";
-const help = "_help_1iwin_109";
+const help$2 = "_help_1iwin_109";
 const helpTitle = "_helpTitle_1iwin_115";
 const helpRows = "_helpRows_1iwin_122";
 const helpRowEnd = "_helpRowEnd_1iwin_131";
@@ -8342,14 +8348,14 @@ const cancel = "_cancel_1iwin_197";
 const cancelledHead = "_cancelledHead_1iwin_221";
 const cancelledTitle = "_cancelledTitle_1iwin_227";
 const cancelledMeta = "_cancelledMeta_1iwin_241";
-const styles$z = {
+const styles$B = {
   page: page$3,
   widget,
   titleRow,
   headline: headline$2,
   track: track$5,
   rule: rule$1,
-  help,
+  help: help$2,
   helpTitle,
   helpRows,
   helpRowEnd,
@@ -8449,7 +8455,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$z.page,
+      className: styles$B.page,
       children: [jsx(Skeleton, {
         height: 206,
         radius: 8
@@ -8527,15 +8533,15 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   if (order.status === "cancelled") {
     return jsxs("div", {
-      className: styles$z.page,
+      className: styles$B.page,
       ref: cancelledPage,
       children: [jsxs("div", {
-        className: styles$z.cancelledHead,
+        className: styles$B.cancelledHead,
         children: [jsx("h1", {
-          className: styles$z.cancelledTitle,
+          className: styles$B.cancelledTitle,
           children: t("Order cancelled")
         }), jsx("p", {
-          className: styles$z.cancelledMeta,
+          className: styles$B.cancelledMeta,
           children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
       }), !order.vip && jsx(Button, {
@@ -8554,17 +8560,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     });
   }
   return jsxs("div", {
-    className: styles$z.page,
+    className: styles$B.page,
     children: [jsxs("section", {
-      className: styles$z.widget,
+      className: styles$B.widget,
       "aria-label": t("Delivery status"),
       children: [jsxs("div", {
-        className: styles$z.titleRow,
+        className: styles$B.titleRow,
         children: [jsx("h1", {
-          className: styles$z.headline,
+          className: styles$B.headline,
           children: t("Order #{0}", shortRef$1(order.order_ref))
         }), order.tracking?.url && inTransit && jsxs("a", {
-          className: styles$z.track,
+          className: styles$B.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -8581,7 +8587,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         locale
       })]
     }), jsx("hr", {
-      className: styles$z.rule
+      className: styles$B.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -8590,7 +8596,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       order
     }), order.can_cancel && jsx("button", {
       type: "button",
-      className: styles$z.cancel,
+      className: styles$B.cancel,
       onClick: () => setCancelOpen(true),
       children: t("Cancel order")
     }), jsx(NeedHelp, {
@@ -8643,14 +8649,14 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   if (order.status !== "delivered") return null;
   const returns = order.returns ?? [];
   return jsxs("section", {
-    className: styles$z.help,
+    className: styles$B.help,
     "aria-labelledby": "order-help",
     children: [jsx("h2", {
-      className: styles$z.helpTitle,
+      className: styles$B.helpTitle,
       id: "order-help",
       children: t("Need help?")
     }), jsxs("div", {
-      className: styles$z.helpRows,
+      className: styles$B.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, " "),
@@ -8680,14 +8686,14 @@ function HelpRow({ label: label2, status, onClick }) {
   const t = useT();
   return jsxs("button", {
     type: "button",
-    className: styles$z.helpRow,
+    className: styles$B.helpRow,
     onClick,
     children: [jsx("span", {
       children: t(label2)
     }), jsxs("span", {
-      className: styles$z.helpRowEnd,
+      className: styles$B.helpRowEnd,
       children: [status && jsx("span", {
-        className: styles$z.helpStatus,
+        className: styles$B.helpStatus,
         children: t(status)
       }), jsx(ChevronRight$1, {})]
     })]
@@ -8703,7 +8709,7 @@ const headline$1 = "_headline_vqbqs_47";
 const subtitle$4 = "_subtitle_vqbqs_65";
 const rule = "_rule_vqbqs_77";
 const done = "_done_vqbqs_94";
-const styles$y = {
+const styles$A = {
   page: page$2,
   confirmed,
   title: title$h,
@@ -8757,7 +8763,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$y.page,
+      className: styles$A.page,
       children: [jsx(Skeleton, {
         height: 140,
         radius: 8
@@ -8780,17 +8786,17 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     });
   }
   return jsxs("div", {
-    className: styles$y.page,
+    className: styles$A.page,
     children: [jsxs("section", {
-      className: styles$y.confirmed,
+      className: styles$A.confirmed,
       "aria-label": t("Order confirmation"),
       children: [jsxs("div", {
-        className: styles$y.title,
+        className: styles$A.title,
         children: [jsx("h1", {
-          className: styles$y.headline,
+          className: styles$A.headline,
           children: t("Your order is confirmed")
         }), order.email && jsx("p", {
-          className: styles$y.subtitle,
+          className: styles$A.subtitle,
           children: t("We’ve sent a confirmation to {0}", order.email)
         })]
       }), jsx(OrderTimeline, {
@@ -8801,7 +8807,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         locale
       })]
     }), jsx("hr", {
-      className: styles$y.rule
+      className: styles$A.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -8811,7 +8817,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     }), onDone && jsx(Button, {
       variant: "secondary",
       fullWidth: true,
-      className: styles$y.done,
+      className: styles$A.done,
       onClick: onDone,
       children: t("Done")
     })]
@@ -8822,7 +8828,7 @@ const progress = "_progress_u46qd_22";
 const delivered = "_delivered_u46qd_27";
 const neutral = "_neutral_u46qd_34";
 const critical = "_critical_u46qd_43";
-const styles$x = {
+const styles$z = {
   badge: badge$2,
   progress,
   delivered,
@@ -8848,7 +8854,7 @@ function OrderStatusBadge({ status }) {
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$x.badge, styles$x[tone]].join(" "),
+    className: [styles$z.badge, styles$z[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -8867,13 +8873,13 @@ function ReturnStatusBadge({ status }) {
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
   const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
-    className: [styles$x.badge, styles$x[tone]].join(" "),
+    className: [styles$z.badge, styles$z[tone]].join(" "),
     children: t(label2)
   });
 }
 const page$1 = "_page_qj11j_2";
 const empty = "_empty_qj11j_22";
-const cta$2 = "_cta_qj11j_32";
+const cta$3 = "_cta_qj11j_32";
 const card$1 = "_card_qj11j_55";
 const tappable = "_tappable_qj11j_70";
 const head$1 = "_head_qj11j_79";
@@ -8884,14 +8890,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$9 = "_image_qj11j_160";
+const image$a = "_image_qj11j_160";
 const placeholder$5 = "_placeholder_qj11j_167";
 const more = "_more_qj11j_174";
 const chevron$2 = "_chevron_qj11j_187";
-const styles$w = {
+const styles$y = {
   page: page$1,
   empty,
-  cta: cta$2,
+  cta: cta$3,
   card: card$1,
   tappable,
   head: head$1,
@@ -8902,7 +8908,7 @@ const styles$w = {
   strip,
   meta: meta$1,
   tile: tile$2,
-  image: image$9,
+  image: image$a,
   placeholder: placeholder$5,
   more,
   chevron: chevron$2
@@ -8966,7 +8972,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$w.page,
+      className: styles$y.page,
       children: [jsx(Skeleton, {
         height: 148,
         radius: 12
@@ -8987,14 +8993,14 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
   }
   if (orders2.length === 0 && returns.length === 0) {
     return jsx("div", {
-      className: styles$w.empty,
+      className: styles$y.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$w.cta,
+            className: styles$y.cta,
             onClick: onStartShopping,
             children: t("Continue shopping")
           })
@@ -9012,7 +9018,7 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
     ret
   }))].sort((a, b) => Date.parse(b.at) - Date.parse(a.at));
   return jsx("ul", {
-    className: styles$w.page,
+    className: styles$y.page,
     children: rows.map((row2) => jsx("li", {
       children: "order" in row2 ? jsx(OrderCard, {
         order: row2.order,
@@ -9036,39 +9042,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$w.head,
+      className: styles$y.head,
       children: [jsxs("div", {
-        className: styles$w.heading,
+        className: styles$y.heading,
         children: [jsx("span", {
-          className: styles$w.title,
+          className: styles$y.title,
           children: `${t("Return")} #${shortRef(ret.return_ref)}`
         }), jsx("span", {
-          className: styles$w.date,
+          className: styles$y.date,
           children: formatPlaced(ret.reported_at, locale)
         })]
       }), jsx(ReturnStatusBadge, {
         status: ret.status
       })]
     }), jsxs("div", {
-      className: styles$w.bottom,
+      className: styles$y.bottom,
       children: [jsx(ReturnThumbnails, {
         ret
       }), jsx("span", {
-        className: styles$w.meta,
+        className: styles$y.meta,
         children: `${items2} · ${money2(ret.value)}`
       }), onOpen && jsx("span", {
-        className: styles$w.chevron,
+        className: styles$y.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$w.card,
+    className: styles$y.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$w.card, styles$w.tappable].join(" "),
+    className: [styles$y.card, styles$y.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `${t("Return")} ${shortRef(ret.return_ref)}, ${ret.headline}`,
     children: body3
@@ -9081,27 +9087,27 @@ function ReturnThumbnails({ ret }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$w.strip,
+      className: styles$y.strip,
       children: jsx("div", {
-        className: [styles$w.tile, styles$w.placeholder].join(" "),
+        className: [styles$y.tile, styles$y.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$w.strip,
+    className: styles$y.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$w.tile,
+        className: styles$y.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$w.image
+          className: styles$y.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$w.more,
+          className: styles$y.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -9118,36 +9124,36 @@ function OrderCard({ order, locale, onOpen }) {
   const t = useT();
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$w.head,
+      className: styles$y.head,
       children: [jsxs("div", {
-        className: styles$w.heading,
+        className: styles$y.heading,
         children: [jsx("span", {
-          className: styles$w.title,
+          className: styles$y.title,
           children: t("Order #{0}", shortRef(order.order_ref))
         }), jsx("span", {
-          className: styles$w.date,
+          className: styles$y.date,
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
         status: order.status
       })]
     }), jsxs("div", {
-      className: styles$w.bottom,
+      className: styles$y.bottom,
       children: [jsx(Thumbnails, {
         order
       }), onOpen && jsx("span", {
-        className: styles$w.chevron,
+        className: styles$y.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$w.card,
+    className: styles$y.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$w.card, styles$w.tappable].join(" "),
+    className: [styles$y.card, styles$y.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
     children: body3
@@ -9160,27 +9166,27 @@ function Thumbnails({ order }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$w.strip,
+      className: styles$y.strip,
       children: jsx("div", {
-        className: [styles$w.tile, styles$w.placeholder].join(" "),
+        className: [styles$y.tile, styles$y.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$w.strip,
+    className: styles$y.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$w.tile,
+        className: styles$y.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$w.image
+          className: styles$y.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$w.more,
+          className: styles$y.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -9210,7 +9216,7 @@ const swatches = "_swatches_mdi63_1";
 const swatch = "_swatch_mdi63_1";
 const swatchActive = "_swatchActive_mdi63_18";
 const swatchDot = "_swatchDot_mdi63_22";
-const styles$v = {
+const styles$x = {
   swatches,
   swatch,
   swatchActive,
@@ -9220,12 +9226,12 @@ function ColourSwatches({ variants, className }) {
   const colours = colourOptions(variants);
   if (colours.length === 0) return null;
   return jsx("div", {
-    className: [styles$v.swatches, className ?? ""].join(" ").trim(),
+    className: [styles$x.swatches, className ?? ""].join(" ").trim(),
     "aria-hidden": "true",
     children: colours.map((c, i) => jsx("span", {
-      className: [styles$v.swatch, i === 0 ? styles$v.swatchActive : ""].join(" "),
+      className: [styles$x.swatch, i === 0 ? styles$x.swatchActive : ""].join(" "),
       children: jsx("span", {
-        className: styles$v.swatchDot,
+        className: styles$x.swatchDot,
         style: {
           background: swatchColour(c.value)
         }
@@ -9235,7 +9241,7 @@ function ColourSwatches({ variants, className }) {
 }
 const tile$1 = "_tile_yg69t_7";
 const media$2 = "_media_yg69t_15";
-const image$8 = "_image_yg69t_25";
+const image$9 = "_image_yg69t_25";
 const placeholder$4 = "_placeholder_yg69t_29";
 const topBadge = "_topBadge_yg69t_37";
 const saleBadge$2 = "_saleBadge_yg69t_78";
@@ -9245,10 +9251,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$u = {
+const styles$w = {
   tile: tile$1,
   media: media$2,
-  image: image$8,
+  image: image$9,
   placeholder: placeholder$4,
   topBadge,
   saleBadge: saleBadge$2,
@@ -9267,37 +9273,37 @@ function ProductTile({ product, priority, size = "default" }) {
   const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
-    className: [styles$u.tile, size === "large" ? styles$u.large : ""].join(" "),
+    className: [styles$w.tile, size === "large" ? styles$w.large : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$u.media,
+      className: styles$w.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$u.image,
+        className: styles$w.image,
         priority
       }) : jsx("div", {
-        className: styles$u.placeholder,
+        className: styles$w.placeholder,
         "aria-hidden": "true"
       }), anyInStock && topBadge2 && jsx("span", {
-        className: styles$u.topBadge,
+        className: styles$w.topBadge,
         children: topBadge2
       }), anyInStock && pct !== void 0 && jsx("span", {
-        className: styles$u.saleBadge,
+        className: styles$w.saleBadge,
         children: jsx(SaleBadge, {
           pct
         })
       }), !anyInStock && jsx("span", {
-        className: styles$u.oos,
+        className: styles$w.oos,
         children: t("Out of stock")
       })]
     }), jsxs("div", {
-      className: styles$u.bottom,
+      className: styles$w.bottom,
       children: [jsxs("div", {
-        className: styles$u.titlePrice,
+        className: styles$w.titlePrice,
         children: [jsx("span", {
-          className: styles$u.title,
+          className: styles$w.title,
           children: product.title
         }), jsx(PriceBlock, {
           price: product.price,
@@ -9308,7 +9314,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })]
       }), jsx(ColourSwatches, {
         variants: product.variants,
-        className: styles$u.swatchSlot
+        className: styles$w.swatchSlot
       })]
     })]
   });
@@ -9318,7 +9324,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$7 = "_image_v48ok_73";
+const image$8 = "_image_v48ok_73";
 const placeholder$3 = "_placeholder_v48ok_77";
 const saleBadge$1 = "_saleBadge_v48ok_89";
 const oos$2 = "_oos_v48ok_97";
@@ -9328,13 +9334,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$t = {
+const styles$v = {
   section: section$3,
   title: title$e,
   link,
   track: track$4,
   frame,
-  image: image$7,
+  image: image$8,
   placeholder: placeholder$3,
   saleBadge: saleBadge$1,
   oos: oos$2,
@@ -9352,54 +9358,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$t.section,
+    className: styles$v.section,
     "aria-labelledby": `gallery-${product.sku}`,
     children: [jsx("h2", {
-      className: styles$t.title,
+      className: styles$v.title,
       id: `gallery-${product.sku}`,
       children: title2
     }), jsxs(ShopLink, {
       to: `/product/${encodeURIComponent(product.sku)}`,
-      className: styles$t.link,
+      className: styles$v.link,
       children: [jsx("ul", {
-        className: styles$t.track,
+        className: styles$v.track,
         "aria-label": t("{0} photographs", product.title),
         children: images.map((src, i) => jsxs("li", {
-          className: styles$t.frame,
+          className: styles$v.frame,
           children: [src ? jsx(ShopImage, {
             src,
             alt: "",
             fill: true,
             sizes: "165px",
-            className: styles$t.image,
+            className: styles$v.image,
             ...i === 0 ? {
               priority: true
             } : {}
           }) : jsx("div", {
-            className: styles$t.placeholder,
+            className: styles$v.placeholder,
             "aria-hidden": "true"
           }), i === 0 && inStock && pct !== void 0 && jsx("span", {
-            className: styles$t.saleBadge,
+            className: styles$v.saleBadge,
             children: jsx(SaleBadge, {
               pct
             })
           }), i === 0 && !inStock && jsx("span", {
-            className: styles$t.oos,
+            className: styles$v.oos,
             children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
-        className: styles$t.caption,
+        className: styles$v.caption,
         children: [jsx("span", {
-          className: styles$t.name,
+          className: styles$v.name,
           children: product.title
         }), jsxs("span", {
-          className: styles$t.price,
+          className: styles$v.price,
           children: [jsx("span", {
-            className: styles$t.paid,
+            className: styles$v.paid,
             children: format(product.price)
           }), product.compare_at && jsxs("span", {
-            className: styles$t.was,
+            className: styles$v.was,
             children: [jsx("span", {
               className: "visually-hidden",
               children: t("Was {0}", format(product.compare_at))
@@ -9410,7 +9416,7 @@ function ProductGallery({ title: title2, product }) {
           })]
         }), jsx(ColourSwatches, {
           variants: product.variants,
-          className: styles$t.swatchRow
+          className: styles$v.swatchRow
         })]
       })]
     })]
@@ -9421,7 +9427,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$s = {
+const styles$u = {
   bar: bar$1,
   chips: chips$1,
   chip: chip$1,
@@ -9432,24 +9438,24 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
   const t = useT();
   const hasActive = active.length > 0;
   return jsxs("div", {
-    className: styles$s.bar,
+    className: styles$u.bar,
     role: "group",
     "aria-label": t("Filters"),
     children: [jsx("div", {
-      className: styles$s.chips,
+      className: styles$u.chips,
       children: options2.map((opt) => {
         const on2 = active.includes(opt.value);
         return jsx("button", {
           type: "button",
           "aria-pressed": on2,
-          className: [styles$s.chip, on2 ? styles$s.on : ""].join(" "),
+          className: [styles$u.chip, on2 ? styles$u.on : ""].join(" "),
           onClick: () => onToggle(opt.value),
           children: opt.label
         }, opt.value);
       })
     }), hasActive && onClear && jsx("button", {
       type: "button",
-      className: styles$s.clear,
+      className: styles$u.clear,
       onClick: onClear,
       children: t("Clear")
     })]
@@ -9457,7 +9463,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
 }
 const wrap$2 = "_wrap_15ntf_1";
 const grid$1 = "_grid_15ntf_7";
-const styles$r = {
+const styles$t = {
   wrap: wrap$2,
   grid: grid$1
 };
@@ -9503,7 +9509,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$r.wrap,
+    className: styles$t.wrap,
     children: [filters.length > 0 && jsx(FilterBar, {
       options: filters,
       active,
@@ -9518,7 +9524,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
-      className: styles$r.grid,
+      className: styles$t.grid,
       children: visible.map((product, i) => jsx("li", {
         children: jsx(ProductTile, {
           product,
@@ -9526,7 +9532,7 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
         })
       }, product.sku))
     }), loading && jsx("div", {
-      className: styles$r.grid,
+      className: styles$t.grid,
       "aria-hidden": "true",
       children: [0, 1].map((i) => jsx(Skeleton, {
         height: 200,
@@ -9545,7 +9551,7 @@ const seeAll = "_seeAll_1rll1_27";
 const track$3 = "_track_1rll1_33";
 const item = "_item_1rll1_67";
 const inset = "_inset_1rll1_79";
-const styles$q = {
+const styles$s = {
   rail,
   header: header$5,
   title: title$d,
@@ -9558,22 +9564,22 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
   const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
-    className: [styles$q.rail, inset2 ? styles$q.inset : ""].join(" "),
+    className: [styles$s.rail, inset2 ? styles$s.inset : ""].join(" "),
     "aria-label": title2,
     children: [jsxs("div", {
-      className: styles$q.header,
+      className: styles$s.header,
       children: [jsx("h2", {
-        className: styles$q.title,
+        className: styles$s.title,
         children: title2
       }), seeAllTo && jsx(ShopLink, {
-        className: styles$q.seeAll,
+        className: styles$s.seeAll,
         to: seeAllTo,
         children: t("See all")
       })]
     }), jsx("ul", {
-      className: styles$q.track,
+      className: styles$s.track,
       children: products.map((product, i) => jsx("li", {
-        className: styles$q.item,
+        className: styles$s.item,
         children: jsx(ProductTile, {
           product,
           priority: i < 2
@@ -9592,7 +9598,7 @@ const title$c = "_title_uxpgl_67";
 const close$1 = "_close_uxpgl_71";
 const body$5 = "_body_uxpgl_84";
 const footer = "_footer_uxpgl_97";
-const styles$p = {
+const styles$r = {
   overlay: overlay$2,
   scrim: scrim$4,
   sheet: sheet$2,
@@ -9632,14 +9638,14 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
   useModalDialog(open, onClose, sheetRef);
   if (!open) return null;
   return jsxs("div", {
-    className: styles$p.overlay,
+    className: styles$r.overlay,
     children: [jsx("div", {
-      className: styles$p.scrim,
+      className: styles$r.scrim,
       onClick: onClose,
       "aria-hidden": "true"
     }), jsxs(ShopSurface, {
       tone: "light",
-      className: styles$p.sheet,
+      className: styles$r.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId,
@@ -9649,7 +9655,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         transition: "none"
       } : void 0,
       children: [jsx("div", {
-        className: styles$p.grabArea,
+        className: styles$r.grabArea,
         onPointerDown: (e) => {
           e.currentTarget.setPointerCapture(e.pointerId);
           onDragStart(e.clientY);
@@ -9658,18 +9664,18 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         onPointerUp: onDragEnd,
         onPointerCancel: onDragEnd,
         children: jsx("div", {
-          className: styles$p.grabber,
+          className: styles$r.grabber,
           "aria-hidden": "true"
         })
       }), jsxs("div", {
-        className: styles$p.header,
+        className: styles$r.header,
         children: [jsx("h2", {
           id: titleId,
-          className: styles$p.title,
+          className: styles$r.title,
           children: title2
         }), jsx("button", {
           type: "button",
-          className: styles$p.close,
+          className: styles$r.close,
           onClick: onClose,
           "aria-label": t("Close"),
           children: jsx("svg", {
@@ -9687,10 +9693,10 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
           })
         })]
       }), jsx("div", {
-        className: styles$p.body,
+        className: styles$r.body,
         children
       }), footer2 && jsx("div", {
-        className: styles$p.footer,
+        className: styles$r.footer,
         children: footer2
       })]
     })]
@@ -9710,7 +9716,7 @@ const stepper = "_stepper_1rmip_10";
 const cap = "_cap_1rmip_23";
 const button = "_button_1rmip_31";
 const value$1 = "_value_1rmip_50";
-const styles$o = {
+const styles$q = {
   wrap: wrap$1,
   stepper,
   cap,
@@ -9788,24 +9794,24 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
     if (!atMax) onChange(qty + 1);
   }
   return jsxs("div", {
-    className: styles$o.wrap,
+    className: styles$q.wrap,
     children: [jsxs("div", {
-      className: styles$o.stepper,
+      className: styles$q.stepper,
       children: [jsx("button", {
         type: "button",
-        className: styles$o.button,
+        className: styles$q.button,
         onClick: decrement,
         disabled: disabled2,
         "aria-label": willDelete ? t("Remove item") : t("Decrease quantity"),
         children: willDelete ? jsx(TrashIcon, {}) : jsx(MinusIcon, {})
       }), jsx("span", {
-        className: styles$o.value,
+        className: styles$q.value,
         "aria-live": "polite",
         "aria-label": `Quantity ${qty}`,
         children: qty
       }), jsx("button", {
         type: "button",
-        className: styles$o.button,
+        className: styles$q.button,
         onClick: increment,
         disabled: disabled2 || atMax,
         "aria-label": t("Increase quantity"),
@@ -9814,7 +9820,7 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2, capDesc
       })]
     }), atMax && capDescribedBy === void 0 && jsx("span", {
       id: ownCapId,
-      className: styles$o.cap,
+      className: styles$q.cap,
       role: "status",
       children: max === 0 ? t("Out of stock") : t("Only {0} left", max)
     })]
@@ -9826,7 +9832,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$6 = "_image_1dx14_59";
+const image$7 = "_image_1dx14_59";
 const placeholder$2 = "_placeholder_1dx14_75";
 const saleBadge = "_saleBadge_1dx14_88";
 const oos$1 = "_oos_1dx14_103";
@@ -9839,14 +9845,14 @@ const detail = "_detail_1dx14_164";
 const price = "_price_1dx14_183";
 const amount = "_amount_1dx14_191";
 const was = "_was_1dx14_200";
-const styles$n = {
+const styles$p = {
   line,
   row: row$5,
   pending,
   labels,
   lowStock: lowStock$1,
   media: media$1,
-  image: image$6,
+  image: image$7,
   placeholder: placeholder$2,
   saleBadge,
   oos: oos$1,
@@ -9873,53 +9879,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$n.line, pending2 ? styles$n.pending : ""].join(" "),
+    className: [styles$p.line, pending2 ? styles$p.pending : ""].join(" "),
     children: [jsxs("div", {
-      className: styles$n.row,
+      className: styles$p.row,
       children: [jsxs("div", {
-        className: styles$n.media,
+        className: styles$p.media,
         children: [displayImage ? jsx(ShopImage, {
           src: displayImage,
           alt: "",
           fill: true,
           sizes: "100px",
-          className: styles$n.image
+          className: styles$p.image
         }) : jsx("div", {
-          className: styles$n.placeholder,
+          className: styles$p.placeholder,
           "aria-hidden": "true"
         }), soldOut ? jsx("span", {
-          className: styles$n.oos,
+          className: styles$p.oos,
           id: noticeId,
           children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
-          className: styles$n.saleBadge,
+          className: styles$p.saleBadge,
           children: jsx(SaleBadge, {
             pct
           })
         })]
       }), jsxs("div", {
-        className: styles$n.info,
+        className: styles$p.info,
         children: [jsxs("div", {
-          className: styles$n.head,
+          className: styles$p.head,
           children: [jsxs("div", {
-            className: styles$n.meta,
+            className: styles$p.meta,
             children: [jsx("span", {
-              className: styles$n.title,
+              className: styles$p.title,
               children: displayTitle
             }), pairs.length > 0 && jsx("div", {
-              className: styles$n.details,
+              className: styles$p.details,
               children: pairs.map(({ key, label: label2, value: value2 }) => jsxs("span", {
-                className: styles$n.detail,
+                className: styles$p.detail,
                 children: [t(label2), ": ", value2]
               }, key))
             })]
           }), jsxs("div", {
-            className: styles$n.price,
+            className: styles$p.price,
             children: [jsx("span", {
-              className: styles$n.amount,
+              className: styles$p.amount,
               children: format(item2.line_total)
             }), compareAt2 && jsx("span", {
-              className: styles$n.was,
+              className: styles$p.was,
               children: format(compareAt2)
             })]
           })]
@@ -9933,22 +9939,22 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         })]
       })]
     }), lowStock2 && jsx("div", {
-      className: styles$n.labels,
+      className: styles$p.labels,
       children: jsx("span", {
         id: noticeId,
-        className: styles$n.lowStock,
+        className: styles$p.lowStock,
         role: "status",
         children: t("Only {0} left", available)
       })
     })]
   });
 }
-const box$1 = "_box_1cf1a_1";
-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$m = {
+const box$1 = "_box_w9fja_1";
+const row$4 = "_row_w9fja_10";
+const icon$2 = "_icon_w9fja_16";
+const label = "_label_w9fja_22";
+const divider$1 = "_divider_w9fja_29";
+const styles$o = {
   box: box$1,
   row: row$4,
   icon: icon$2,
@@ -9958,66 +9964,43 @@ const styles$m = {
 function ShippingInfo() {
   const t = useT();
   return jsxs("section", {
-    className: styles$m.box,
+    className: styles$o.box,
     "aria-label": t("Shipping and returns"),
     children: [jsxs("div", {
-      className: styles$m.row,
-      children: [jsxs("svg", {
-        className: styles$m.icon,
+      className: styles$o.row,
+      children: [jsx("svg", {
+        className: styles$o.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         "aria-hidden": "true",
-        children: [jsx("path", {
-          d: "M3 6.5h10v9H3v-9Zm10 3h4l3 3v3h-7v-6Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinejoin: "round"
-        }), jsx("circle", {
-          cx: "7",
-          cy: "17",
-          r: "1.6",
-          stroke: "currentColor",
-          strokeWidth: "1.5"
-        }), jsx("circle", {
-          cx: "17.5",
-          cy: "17",
-          r: "1.6",
-          stroke: "currentColor",
-          strokeWidth: "1.5"
-        })]
+        children: jsx("path", {
+          d: "M15.459 14.2744C14.6592 14.835 14.1396 15.7646 14.1396 16.8174C14.1396 16.9951 14.1602 17.1729 14.1875 17.3369H10.5098C10.5371 17.166 10.5576 16.9951 10.5576 16.8174C10.5576 15.0537 9.12207 13.6182 7.35156 13.6182C5.58105 13.6182 4.13867 15.0537 4.13867 16.8174C4.13867 16.9883 4.15234 17.1523 4.18652 17.3164H3.91992C2.6416 17.3164 1.9375 16.3799 1.9375 15.0264V6.31738C1.9375 4.84766 2.77832 4 4.25488 4H13.1484C14.6182 4 15.459 4.84766 15.459 6.31738V14.2744ZM16.4365 7.58203H18.1865C18.9795 7.58203 19.5127 7.78711 19.9844 8.32031L22.2949 10.9316C22.7393 11.4238 22.8691 11.7998 22.8691 12.5859V15.0264C22.8691 16.4277 22.1172 17.3438 20.7773 17.3438H20.5107C20.5381 17.1729 20.5586 16.9951 20.5586 16.8174C20.5586 15.0469 19.1094 13.6113 17.3457 13.6113C17.0244 13.6113 16.7168 13.6729 16.4365 13.7686V7.58203ZM18.6377 12.21H21.0303C21.0166 12.0664 20.9551 11.9707 20.8594 11.8613L19.0615 9.83105C18.8359 9.57812 18.665 9.50977 18.3506 9.50977H17.9268V11.499C17.9268 11.9365 18.207 12.21 18.6377 12.21ZM17.3525 19.1279C16.0811 19.1279 15.042 18.0957 15.042 16.8174C15.042 15.5459 16.0811 14.5137 17.3525 14.5137C18.624 14.5137 19.6562 15.5459 19.6562 16.8174C19.6562 18.1162 18.6309 19.1279 17.3525 19.1279ZM7.35156 19.1279C6.08008 19.1279 5.04102 18.0957 5.04102 16.8174C5.04102 15.5459 6.08008 14.5137 7.35156 14.5137C8.62305 14.5137 9.65527 15.5459 9.65527 16.8174C9.65527 18.0889 8.62305 19.1279 7.35156 19.1279Z",
+          fill: "currentColor"
+        })
       }), jsx("p", {
-        className: styles$m.label,
+        className: styles$o.label,
         children: t("Standard or express delivery")
       })]
     }), jsx("div", {
-      className: styles$m.divider,
+      className: styles$o.divider,
       role: "presentation"
     }), jsxs("div", {
-      className: styles$m.row,
-      children: [jsxs("svg", {
-        className: styles$m.icon,
+      className: styles$o.row,
+      children: [jsx("svg", {
+        className: styles$o.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         "aria-hidden": "true",
-        children: [jsx("path", {
-          d: "M9 7 5.5 10.5 9 14",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }), jsx("path", {
-          d: "M5.5 10.5H15a4 4 0 0 1 0 8h-3",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })]
+        children: jsx("path", {
+          d: "M12.2449 19.8028C12.2449 20.4839 11.7649 21 11.1087 21C10.6386 21 10.2566 20.7936 9.79628 20.3394L2.47992 13.0734C2.11753 12.7225 2 12.3303 2 12C2 11.6594 2.11753 11.2775 2.47992 10.9163L9.79628 3.71216C10.3056 3.21674 10.619 3 11.0891 3C11.7649 3 12.2449 3.56766 12.2449 4.24885V7.88188H12.4995C19.0813 7.88188 22 12.3303 22 19.5034C22 20.4633 21.5299 20.9794 20.9912 20.9794C20.57 20.9794 20.1391 20.8658 19.8061 20.2156C18.2292 17.1193 16.0255 16.1388 12.4995 16.1388H12.2449V19.8028Z",
+          fill: "currentColor"
+        })
       }), jsx("p", {
-        className: styles$m.label,
+        className: styles$o.label,
         children: t("14 days returns")
       })]
     })]
@@ -10028,21 +10011,21 @@ const floating$1 = "_floating_23dkv_52";
 const divider = "_divider_23dkv_58";
 const info$1 = "_info_23dkv_62";
 const actions = "_actions_23dkv_70";
-const styles$l = {
+const styles$n = {
   bar,
   floating: floating$1,
   divider,
   info: info$1,
   actions
 };
-function StickyCtaBar({ children, info: info2, variant = "floating" }) {
+function StickyCtaBar({ children, info: info2, variant = "floating", className }) {
   return jsxs("div", {
-    className: [styles$l.bar, styles$l[variant]].join(" "),
+    className: [styles$n.bar, styles$n[variant], className ?? ""].join(" "),
     children: [info2 && jsx("div", {
-      className: styles$l.info,
+      className: styles$n.info,
       children: info2
     }), jsx("div", {
-      className: styles$l.actions,
+      className: styles$n.actions,
       children
     })]
   });
@@ -10055,7 +10038,7 @@ const sectionHeader = "_sectionHeader_1bdb0_40";
 const sectionTitle = "_sectionTitle_1bdb0_46";
 const count = "_count_1bdb0_67";
 const lines = "_lines_1bdb0_91";
-const styles$k = {
+const styles$m = {
   surface,
   screen,
   body: body$4,
@@ -10071,7 +10054,7 @@ function CartView(props = {}) {
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
-    className: styles$k.surface,
+    className: styles$m.surface,
     children: jsx(CartViewContent, {
       ...props
     })
@@ -10233,22 +10216,22 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   }
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
   return jsxs("div", {
-    className: styles$k.screen,
+    className: styles$m.screen,
     children: [jsxs("div", {
-      className: styles$k.body,
+      className: styles$m.body,
       children: [jsxs("section", {
-        className: styles$k.items,
+        className: styles$m.items,
         children: [jsxs("div", {
-          className: styles$k.sectionHeader,
+          className: styles$m.sectionHeader,
           children: [jsx("h2", {
-            className: styles$k.sectionTitle,
+            className: styles$m.sectionTitle,
             children: t("Items")
           }), jsx("span", {
-            className: styles$k.count,
+            className: styles$m.count,
             children: itemCount
           })]
         }), jsx("ul", {
-          className: styles$k.lines,
+          className: styles$m.lines,
           children: cart2.items.map((item2) => jsx("li", {
             children: jsx(CartLineItem, {
               item: item2,
@@ -10313,19 +10296,19 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_1vbj7_1";
+const gallery$1 = "_gallery_1vbj7_1";
 const track$2 = "_track_1vbj7_5";
 const slide$1 = "_slide_1vbj7_20";
-const image$5 = "_image_1vbj7_27";
+const image$6 = "_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$j = {
-  gallery,
+const styles$l = {
+  gallery: gallery$1,
   track: track$2,
   slide: slide$1,
-  image: image$5,
+  image: image$6,
   placeholder: placeholder$1,
   dots: dots$2,
   dot: dot$2,
@@ -10372,30 +10355,30 @@ function MediaGallery({ media: media2, alt, focus }) {
   }
   if (media2.length === 0) {
     return jsx("div", {
-      className: styles$j.placeholder,
+      className: styles$l.placeholder,
       "aria-hidden": "true"
     });
   }
   return jsxs("div", {
-    className: styles$j.gallery,
+    className: styles$l.gallery,
     children: [jsx("div", {
-      className: styles$j.track,
+      className: styles$l.track,
       ref: trackRef,
       role: "group",
       "aria-label": `${alt} images`,
       children: media2.map((src, i) => jsx("div", {
-        className: styles$j.slide,
+        className: styles$l.slide,
         children: jsx(ShopImage, {
           src,
           alt: `${alt} — image ${i + 1} of ${media2.length}`,
           fill: true,
           sizes: "(max-width: 480px) 100vw, 480px",
-          className: styles$j.image,
+          className: styles$l.image,
           priority: i === 0
         })
       }, src))
     }), media2.length > 1 && jsx("div", {
-      className: styles$j.dots,
+      className: styles$l.dots,
       role: "tablist",
       "aria-label": t("Gallery pagination"),
       children: media2.map((src, i) => jsx("button", {
@@ -10403,12 +10386,89 @@ function MediaGallery({ media: media2, alt, focus }) {
         role: "tab",
         "aria-selected": i === active,
         "aria-label": `Go to image ${i + 1}`,
-        className: [styles$j.dot, i === active ? styles$j.dotActive : ""].join(" "),
+        className: [styles$l.dot, i === active ? styles$l.dotActive : ""].join(" "),
         onClick: () => goTo(i)
       }, src))
     })]
   });
 }
+const row$3 = "_row_l4edh_1";
+const badge$1 = "_badge_l4edh_11";
+const styles$k = {
+  row: row$3,
+  badge: badge$1
+};
+function PdpBadges({ badges: badges2 }) {
+  const flags = badges2.filter((b) => b.trim().length > 0);
+  if (flags.length === 0) return null;
+  return jsx("ul", {
+    className: styles$k.row,
+    children: flags.map((flag) => jsx("li", {
+      className: styles$k.badge,
+      children: flag
+    }, flag))
+  });
+}
+const gallery = "_gallery_1m6o7_1";
+const thumbs = "_thumbs_1m6o7_7";
+const thumb = "_thumb_1m6o7_7";
+const main = "_main_1m6o7_34";
+const image$5 = "_image_1m6o7_44";
+const badges = "_badges_1m6o7_49";
+const styles$j = {
+  gallery,
+  thumbs,
+  thumb,
+  main,
+  image: image$5,
+  badges
+};
+function DesktopGallery({ media: media2, alt, badges: badges2, focus }) {
+  const t = useT();
+  const [active, setActive] = useState(0);
+  const mediaKey = media2.join("|");
+  useEffect(() => {
+    setActive(focus !== void 0 && focus >= 0 && focus < media2.length ? focus : 0);
+  }, [mediaKey, focus, media2.length]);
+  const shown = media2[active] ?? media2[0];
+  return jsxs("div", {
+    className: styles$j.gallery,
+    children: [media2.length > 0 && jsx("div", {
+      className: styles$j.thumbs,
+      role: "group",
+      "aria-label": t("{0} images", alt),
+      children: media2.map((src, i) => jsx("button", {
+        type: "button",
+        className: styles$j.thumb,
+        "aria-pressed": i === active,
+        "aria-label": t("Show image {0} of {1}", String(i + 1), String(media2.length)),
+        onClick: () => setActive(i),
+        children: jsx(ShopImage, {
+          src,
+          alt: "",
+          fill: true,
+          sizes: "72px",
+          className: styles$j.image
+        })
+      }, src))
+    }), jsxs("div", {
+      className: styles$j.main,
+      children: [shown ? jsx(ShopImage, {
+        src: shown,
+        alt: t("{0} — image {1} of {2}", alt, String(active + 1), String(media2.length)),
+        fill: true,
+        sizes: "440px",
+        className: styles$j.image,
+        priority: true
+      }) : null, jsx("div", {
+        className: styles$j.badges,
+        children: jsx(PdpBadges, {
+          badges: badges2
+        })
+      })]
+    })]
+  });
+}
 const scrim$3 = "_scrim_r4azu_8";
 const sheet$1 = "_sheet_r4azu_2";
 const body$3 = "_body_r4azu_40";
@@ -10617,7 +10677,7 @@ const styles$h = {
   sizeGuide,
   info
 };
-function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = false, lowStock: lowStock2, guide }) {
+function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: error2 = false, lowStock: lowStock2, guide }) {
   const t = useT();
   const [guideOpen, setGuideOpen] = useState(false);
   const showGuide = useShopFeatures().sizeCharts && guide !== void 0;
@@ -10667,7 +10727,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       role: "radiogroup",
       "aria-label": t("Size"),
       "aria-required": "true",
-      children: sizes.map((size) => {
+      children: sizes2.map((size) => {
         const isSelected = size.value === selected2;
         const disabled2 = !size.available;
         return jsxs("button", {
@@ -10903,28 +10963,11 @@ function ProductDetails({ description: description2 }) {
     }) : null]
   });
 }
-const row$3 = "_row_l4edh_1";
-const badge$1 = "_badge_l4edh_11";
-const styles$d = {
-  row: row$3,
-  badge: badge$1
-};
-function PdpBadges({ badges }) {
-  const flags = badges.filter((b) => b.trim().length > 0);
-  if (flags.length === 0) return null;
-  return jsx("ul", {
-    className: styles$d.row,
-    children: flags.map((flag) => jsx("li", {
-      className: styles$d.badge,
-      children: flag
-    }, flag))
-  });
-}
 const banner = "_banner_1xvw4_2";
 const message = "_message_1xvw4_14";
 const icon$1 = "_icon_1xvw4_22";
 const timer = "_timer_1xvw4_27";
-const styles$c = {
+const styles$d = {
   banner,
   message,
   icon: icon$1,
@@ -10948,11 +10991,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$c.banner,
+    className: styles$d.banner,
     children: [jsxs("span", {
-      className: styles$c.message,
+      className: styles$d.message,
       children: [jsxs("svg", {
-        className: styles$c.icon,
+        className: styles$d.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -10974,7 +11017,7 @@ function PromoBanner({ promo: promo2 }) {
         })]
       }), promo2.message]
     }), showTimer && jsxs("span", {
-      className: styles$c.timer,
+      className: styles$d.timer,
       children: [jsxs("svg", {
         width: "16",
         height: "16",
@@ -10998,16 +11041,24 @@ function PromoBanner({ promo: promo2 }) {
     })]
   });
 }
-const page = "_page_1hv16_1";
-const content = "_content_1hv16_14";
-const intro = "_intro_1hv16_21";
-const productInfo = "_productInfo_1hv16_28";
-const titlePrice = "_titlePrice_1hv16_34";
-const title$6 = "_title_1hv16_34";
-const availability = "_availability_1hv16_55";
-const low = "_low_1hv16_62";
-const oos = "_oos_1hv16_66";
-const styles$b = {
+const page = "_page_1479k_1";
+const content = "_content_1479k_14";
+const intro = "_intro_1479k_21";
+const productInfo = "_productInfo_1479k_28";
+const titlePrice = "_titlePrice_1479k_34";
+const title$6 = "_title_1479k_34";
+const availability = "_availability_1479k_55";
+const low = "_low_1479k_62";
+const oos = "_oos_1479k_66";
+const breadcrumb = "_breadcrumb_1479k_70";
+const help$1 = "_help_1479k_71";
+const desktopGallery = "_desktopGallery_1479k_72";
+const wide = "_wide_1479k_77";
+const phoneGallery = "_phoneGallery_1479k_101";
+const introBadges = "_introBadges_1479k_115";
+const sizes = "_sizes_1479k_119";
+const cta$2 = "_cta_1479k_123";
+const styles$c = {
   page,
   content,
   intro,
@@ -11016,9 +11067,17 @@ const styles$b = {
   title: title$6,
   availability,
   low,
-  oos
+  oos,
+  breadcrumb,
+  help: help$1,
+  desktopGallery,
+  wide,
+  phoneGallery,
+  introBadges,
+  sizes,
+  cta: cta$2
 };
-function ProductDetail({ product, inventory: inventory2, recommendations = [], claim }) {
+function ProductDetail({ product, inventory: inventory2, recommendations = [], claim, breadcrumb: breadcrumb2, help: help2 }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -11045,7 +11104,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
   const structured = hasSizes || hasColours;
   const [selectedSize, setSelectedSize] = useState(null);
   const [selectedColour, setSelectedColour] = useState(hasColours ? baseColours.find((c) => c.available)?.value ?? baseColours[0].value : null);
-  const sizes = useMemo(() => sizeOptions(variants, selectedColour), [variants, selectedColour]);
+  const sizes2 = useMemo(() => sizeOptions(variants, selectedColour), [variants, selectedColour]);
   const colours = useMemo(() => colourOptions(variants, selectedSize), [variants, selectedSize]);
   const [genericSku, setGenericSku] = useState(null);
   const [busy, setBusy] = useState(null);
@@ -11246,25 +11305,47 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
   return jsxs(ShopSurface, {
     tone: "light",
     fill: true,
-    className: styles$b.page,
-    children: [jsx(MediaGallery, {
-      media: media2,
-      alt: product.title,
-      ...focus !== void 0 ? {
-        focus
-      } : {}
+    className: [styles$c.page, claim ? styles$c.wide : ""].join(" "),
+    ...claim ? {
+      "data-shop-layout": "wide"
+    } : {},
+    children: [breadcrumb2 && jsx("div", {
+      className: styles$c.breadcrumb,
+      children: breadcrumb2
+    }), jsx("div", {
+      className: styles$c.phoneGallery,
+      children: jsx(MediaGallery, {
+        media: media2,
+        alt: product.title,
+        ...focus !== void 0 ? {
+          focus
+        } : {}
+      })
+    }), claim && jsx("div", {
+      className: styles$c.desktopGallery,
+      children: jsx(DesktopGallery, {
+        media: media2,
+        alt: product.title,
+        badges: product.badges ?? [],
+        ...focus !== void 0 ? {
+          focus
+        } : {}
+      })
     }), jsxs("div", {
-      className: styles$b.content,
+      className: styles$c.content,
       children: [jsxs("div", {
-        className: styles$b.intro,
-        children: [jsx(PdpBadges, {
-          badges: product.badges ?? []
+        className: styles$c.intro,
+        children: [jsx("div", {
+          className: styles$c.introBadges,
+          children: jsx(PdpBadges, {
+            badges: product.badges ?? []
+          })
         }), jsxs("div", {
-          className: styles$b.productInfo,
+          className: styles$c.productInfo,
           children: [jsxs("div", {
-            className: styles$b.titlePrice,
+            className: styles$c.titlePrice,
             children: [jsx("h1", {
-              className: styles$b.title,
+              className: styles$c.title,
               children: product.title
             }), jsx(PriceBlock, {
               price: claim ? {
@@ -11281,7 +11362,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
           })]
         })]
       }), stockNotice && jsx("p", {
-        className: [styles$b.availability, anyInStock ? styles$b.low : styles$b.oos].join(" "),
+        className: [styles$c.availability, anyInStock ? styles$c.low : styles$c.oos].join(" "),
         role: "status",
         children: availabilityLabel
       }), hasColours && jsx("div", {
@@ -11293,8 +11374,9 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         })
       }), hasSizes && jsx("div", {
         ref: sizeRef,
+        className: styles$c.sizes,
         children: jsx(SizeSelector, {
-          sizes,
+          sizes: sizes2,
           selected: selectedSize,
           onSelect: selectSize,
           error: sizeError,
@@ -11315,7 +11397,11 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
         inset: true
       })]
     }), jsx(StickyCtaBar, {
+      className: styles$c.cta,
       children: cta2
+    }), help2 && jsx("div", {
+      className: styles$c.help,
+      children: help2
     })]
   });
 }
@@ -11327,7 +11413,7 @@ const text$3 = "_text_1tiqx_108";
 const title$5 = "_title_1tiqx_157";
 const subtitle$2 = "_subtitle_1tiqx_168";
 const noImage = "_noImage_1tiqx_183";
-const styles$a = {
+const styles$b = {
   hero: hero$2,
   image: image$3,
   scrim: scrim$1,
@@ -11343,10 +11429,10 @@ function PcpHero({ hero: hero2 }) {
   const t = useT();
   return jsxs("section", {
     ref: heroRef,
-    className: [styles$a.hero, hero2.image ? "" : styles$a.noImage].join(" "),
+    className: [styles$b.hero, hero2.image ? "" : styles$b.noImage].join(" "),
     children: [hero2.image && jsxs(Fragment, {
       children: [jsx("div", {
-        className: styles$a.image,
+        className: styles$b.image,
         children: jsx(ShopImage, {
           src: hero2.image,
           alt: "",
@@ -11355,19 +11441,19 @@ function PcpHero({ hero: hero2 }) {
           priority: true
         })
       }), jsx("div", {
-        className: styles$a.scrim,
+        className: styles$b.scrim,
         "aria-hidden": "true"
       }), jsx("div", {
-        className: styles$a.fade,
+        className: styles$b.fade,
         "aria-hidden": "true"
       })]
     }), jsxs("div", {
-      className: styles$a.text,
+      className: styles$b.text,
       children: [jsx("h1", {
-        className: styles$a.title,
+        className: styles$b.title,
         children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
-        className: styles$a.subtitle,
+        className: styles$b.subtitle,
         children: t(hero2.subtitle)
       })]
     })]
@@ -11376,14 +11462,14 @@ function PcpHero({ hero: hero2 }) {
 const text$2 = "_text_1saw4_6";
 const center = "_center_1saw4_18";
 const left = "_left_1saw4_23";
-const styles$9 = {
+const styles$a = {
   text: text$2,
   center,
   left
 };
 function LifestyleText({ text: text2, align = "center" }) {
   return jsx("p", {
-    className: [styles$9.text, align === "left" ? styles$9.left : styles$9.center].join(" "),
+    className: [styles$a.text, align === "left" ? styles$a.left : styles$a.center].join(" "),
     children: text2
   });
 }
@@ -11395,7 +11481,7 @@ const image$2 = "_image_79nr3_46";
 const dots$1 = "_dots_79nr3_51";
 const dot$1 = "_dot_79nr3_51";
 const dotActive$1 = "_dotActive_79nr3_76";
-const styles$8 = {
+const styles$9 = {
   wrap,
   box,
   track: track$1,
@@ -11419,36 +11505,36 @@ function LifestyleImage({ images, videos }) {
   }, []);
   if (images.length === 0) return null;
   return jsx("div", {
-    className: styles$8.wrap,
+    className: styles$9.wrap,
     children: jsxs("div", {
-      className: styles$8.box,
+      className: styles$9.box,
       children: [jsx("ul", {
-        className: styles$8.track,
+        className: styles$9.track,
         ref: trackRef,
         children: images.map((src, i) => {
           const clip = videos?.[i];
           return jsx("li", {
-            className: styles$8.slide,
+            className: styles$9.slide,
             children: clip ? jsx(ShopVideo, {
               src: clip,
               poster: src,
               fill: true,
-              className: styles$8.image
+              className: styles$9.image
             }) : jsx(ShopImage, {
               src,
               alt: "",
               fill: true,
               sizes: "(max-width: 480px) 100vw, 480px",
-              className: styles$8.image,
+              className: styles$9.image,
               priority: i === 0
             })
           }, src);
         })
       }), images.length > 1 && jsx("div", {
-        className: styles$8.dots,
+        className: styles$9.dots,
         "aria-hidden": "true",
         children: images.map((src, i) => jsx("span", {
-          className: [styles$8.dot, i === active ? styles$8.dotActive : ""].join(" ")
+          className: [styles$9.dot, i === active ? styles$9.dotActive : ""].join(" ")
         }, src))
       })]
     })
@@ -11462,7 +11548,7 @@ const author = "_author_qsxtq_58";
 const dots = "_dots_qsxtq_69";
 const dot = "_dot_qsxtq_69";
 const dotActive = "_dotActive_qsxtq_85";
-const styles$7 = {
+const styles$8 = {
   section: section$2,
   track,
   card,
@@ -11486,26 +11572,26 @@ function ReviewCarousel({ quotes }) {
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
   return jsxs("section", {
-    className: styles$7.section,
+    className: styles$8.section,
     "aria-label": t("Reviews"),
     children: [jsx("ul", {
-      className: styles$7.track,
+      className: styles$8.track,
       ref: trackRef,
       children: quotes.map((q, i) => jsxs("li", {
-        className: styles$7.card,
+        className: styles$8.card,
         children: [jsxs("blockquote", {
-          className: styles$7.quote,
+          className: styles$8.quote,
           children: ["“", q.quote, "”"]
         }), jsx("p", {
-          className: styles$7.author,
+          className: styles$8.author,
           children: q.author
         })]
       }, i))
     }), quotes.length > 1 && jsx("div", {
-      className: styles$7.dots,
+      className: styles$8.dots,
       "aria-hidden": "true",
       children: quotes.map((_, i) => jsx("span", {
-        className: [styles$7.dot, i === active ? styles$7.dotActive : ""].join(" ")
+        className: [styles$8.dot, i === active ? styles$8.dotActive : ""].join(" ")
       }, i))
     })]
   });
@@ -11514,7 +11600,7 @@ const section$1 = "_section_1nrsi_1";
 const row$2 = "_row_1nrsi_9";
 const title$4 = "_title_1nrsi_20";
 const body$1 = "_body_1nrsi_43";
-const styles$6 = {
+const styles$7 = {
   section: section$1,
   row: row$2,
   title: title$4,
@@ -11523,15 +11609,15 @@ const styles$6 = {
 function WhyUs({ items: items2 }) {
   const t = useT();
   return jsx("section", {
-    className: styles$6.section,
+    className: styles$7.section,
     "aria-label": t("Why shop with us"),
     children: items2.map((it, i) => jsxs("div", {
-      className: styles$6.row,
+      className: styles$7.row,
       children: [jsx("p", {
-        className: styles$6.title,
+        className: styles$7.title,
         children: it.title
       }), jsx("p", {
-        className: styles$6.body,
+        className: styles$7.body,
         children: it.body
       })]
     }, i))
@@ -11541,7 +11627,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$5 = {
+const styles$6 = {
   section,
   title: title$3,
   list: list$1,
@@ -11550,17 +11636,17 @@ const styles$5 = {
 function ExploreList({ title: title2, links }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$5.section,
+    className: styles$6.section,
     "aria-label": title2,
     children: [jsx("h2", {
-      className: styles$5.title,
+      className: styles$6.title,
       children: title2
     }), jsx("ul", {
-      className: styles$5.list,
+      className: styles$6.list,
       children: links.map((l) => jsx("li", {
         children: jsxs(ShopLink, {
           to: `/category/${encodeURIComponent(l.code)}`,
-          className: styles$5.row,
+          className: styles$6.row,
           children: [jsx("span", {
             children: t(l.label)
           }), jsx("svg", {
@@ -11588,7 +11674,7 @@ const featured = "_featured_1kft8_36";
 const gridBlock = "_gridBlock_1kft8_37";
 const blockTitle = "_blockTitle_1kft8_44";
 const grid = "_grid_1kft8_37";
-const styles$4 = {
+const styles$5 = {
   pcp,
   blocks,
   featured,
@@ -11611,9 +11697,9 @@ function Block({ block }) {
       });
     case "featured":
       return jsxs("div", {
-        className: styles$4.featured,
+        className: styles$5.featured,
         children: [block.title && jsx("h2", {
-          className: styles$4.blockTitle,
+          className: styles$5.blockTitle,
           children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
@@ -11633,12 +11719,12 @@ function Block({ block }) {
       });
     case "grid":
       return jsxs("div", {
-        className: styles$4.gridBlock,
+        className: styles$5.gridBlock,
         children: [block.title && jsx("h2", {
-          className: styles$4.blockTitle,
+          className: styles$5.blockTitle,
           children: t(block.title)
         }), jsx("ul", {
-          className: styles$4.grid,
+          className: styles$5.grid,
           children: block.products.map((p) => jsx("li", {
             children: jsx(ProductTile, {
               product: p
@@ -11667,11 +11753,11 @@ function CategoryContent({ page: page2 }) {
   return jsxs(ShopSurface, {
     tone: "dark",
     fill: true,
-    className: styles$4.pcp,
+    className: styles$5.pcp,
     children: [jsx(PcpHero, {
       hero: page2.hero
     }), jsx("div", {
-      className: styles$4.blocks,
+      className: styles$5.blocks,
       children: page2.blocks.map((block, i) => jsx(Block, {
         block
       }, i))
@@ -11845,16 +11931,19 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const hero$1 = "_hero_1j0m8_1";
-const image$1 = "_image_1j0m8_11";
-const foot = "_foot_1j0m8_34";
-const text$1 = "_text_1j0m8_40";
-const logo$1 = "_logo_1j0m8_48";
-const copy$1 = "_copy_1j0m8_53";
-const headline = "_headline_1j0m8_62";
-const body = "_body_1j0m8_70";
-const cta$1 = "_cta_1j0m8_79";
-const styles$3 = {
+const hero$1 = "_hero_dctyt_1";
+const image$1 = "_image_dctyt_11";
+const foot = "_foot_dctyt_34";
+const text$1 = "_text_dctyt_40";
+const logo$1 = "_logo_dctyt_48";
+const copy$1 = "_copy_dctyt_53";
+const headline = "_headline_dctyt_62";
+const body = "_body_dctyt_70";
+const cta$1 = "_cta_dctyt_79";
+const video = "_video_dctyt_83";
+const desktopOnly = "_desktopOnly_dctyt_87";
+const phoneOnly = "_phoneOnly_dctyt_97";
+const styles$4 = {
   hero: hero$1,
   image: image$1,
   foot,
@@ -11863,21 +11952,28 @@ const styles$3 = {
   copy: copy$1,
   headline,
   body,
-  cta: cta$1
+  cta: cta$1,
+  video,
+  desktopOnly,
+  phoneOnly
 };
 function VipHero({ hero: hero2, onContinue }) {
   const t = useT();
   const assetUrl = useAssetUrl();
   const ref = useRef(null);
   useTopOffset(ref, "--vip-hero-top");
+  const desktopImage = hero2.desktop_image ?? null;
+  const desktopVideo = hero2.desktop_video ?? null;
+  const wide2 = desktopImage !== null || desktopVideo !== null;
   return jsx(ShopSurface, {
     tone: "dark",
     fill: true,
+    "data-shop-layout": "wide",
     children: jsxs("section", {
       ref,
-      className: styles$3.hero,
+      className: styles$4.hero,
       children: [hero2.image && jsx("div", {
-        className: styles$3.image,
+        className: [styles$4.image, wide2 ? styles$4.phoneOnly : ""].join(" "),
         children: jsx(ShopImage, {
           src: hero2.image,
           alt: "",
@@ -11885,26 +11981,41 @@ function VipHero({ hero: hero2, onContinue }) {
           sizes: "(max-width: 480px) 100vw, 480px",
           priority: true
         })
+      }), wide2 && jsxs("div", {
+        className: [styles$4.image, styles$4.desktopOnly].join(" "),
+        children: [desktopImage && jsx(ShopImage, {
+          src: desktopImage,
+          alt: "",
+          fill: true,
+          sizes: "100vw"
+        }), desktopVideo && jsx(ShopVideo, {
+          src: desktopVideo,
+          ...desktopImage ? {
+            poster: desktopImage
+          } : {},
+          fill: true,
+          className: styles$4.video
+        })]
       }), jsxs("div", {
-        className: styles$3.foot,
+        className: styles$4.foot,
         children: [jsxs("div", {
-          className: styles$3.text,
+          className: styles$4.text,
           children: [jsx("img", {
             src: assetUrl("/figma/home/dazn-logo.svg"),
             alt: t("DAZN"),
-            className: styles$3.logo
+            className: styles$4.logo
           }), jsxs("div", {
-            className: styles$3.copy,
+            className: styles$4.copy,
             children: [jsx("h1", {
-              className: styles$3.headline,
+              className: styles$4.headline,
               children: hero2.headline
             }), hero2.body && jsx("p", {
-              className: styles$3.body,
+              className: styles$4.body,
               children: hero2.body
             })]
           })]
         }), jsx("div", {
-          className: styles$3.cta,
+          className: styles$4.cta,
           children: jsx(Button, {
             variant: "primary",
             fullWidth: true,
@@ -11916,7 +12027,82 @@ function VipHero({ hero: hero2, onContinue }) {
     })
   });
 }
-function VipLandingView({ token, onUnavailable }) {
+function HelpIcon() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: jsxs("g", {
+      transform: "translate(1.93 1.93)",
+      children: [jsx("path", {
+        d: "M10.0781 14.1543C10.52 14.1543 10.8779 14.5123 10.8779 14.9541C10.8778 15.3958 10.5199 15.7539 10.0781 15.7539H10.0693C9.62757 15.7539 9.26963 15.3958 9.26953 14.9541C9.26953 14.5123 9.62751 14.1543 10.0693 14.1543H10.0781Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        d: "M8.21777 4.7168C8.93457 4.29562 9.77726 4.14167 10.5967 4.28223C11.4161 4.42286 12.1599 4.84835 12.6953 5.48438C13.2303 6.12005 13.5233 6.92505 13.5225 7.75586L13.5107 8.00098C13.3992 9.19732 12.4886 10.0076 11.8057 10.4629C11.4401 10.7066 11.0785 10.8882 10.8018 11.0137V11.8223C10.8014 12.2637 10.4425 12.622 10.001 12.6221C9.55954 12.6219 9.20156 12.2637 9.20117 11.8223V10.4775C9.20117 10.1332 9.42146 9.82671 9.74805 9.71777C9.75073 9.71685 9.75671 9.71536 9.76367 9.71289C9.77824 9.70771 9.80199 9.69931 9.83301 9.6875C9.89571 9.66361 9.98896 9.62621 10.1016 9.57617C10.3291 9.47505 10.6264 9.32523 10.918 9.13086C11.5496 8.70973 11.9217 8.23795 11.9219 7.75586C11.9225 7.30239 11.7627 6.86161 11.4707 6.51465C11.1787 6.16788 10.773 5.93611 10.3262 5.85938C9.87921 5.78271 9.41933 5.86603 9.02832 6.0957C8.63742 6.32547 8.34003 6.68657 8.18945 7.11426C8.04274 7.53077 7.58557 7.74995 7.16895 7.60352C6.75252 7.45687 6.53351 7.00053 6.67969 6.58398C6.9556 5.79964 7.50096 5.1381 8.21777 4.7168Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.0693 0C15.6304 0.000197913 20.1395 4.50828 20.1396 10.0693C20.1395 15.6304 15.6304 20.1395 10.0693 20.1396C4.50828 20.1395 0.000197917 15.6304 0 10.0693C0.00019791 4.50828 4.50828 0.000197906 10.0693 0ZM10.0693 2C5.61285 2.0002 2.0002 5.61285 2 10.0693C2.0002 14.5258 5.61285 18.1395 10.0693 18.1396C14.5258 18.1395 18.1395 14.5258 18.1396 10.0693C18.1395 5.61285 14.5258 2.0002 10.0693 2Z",
+        fill: "currentColor"
+      })]
+    })
+  });
+}
+const crumbs = "_crumbs_wl5mz_1";
+const home = "_home_wl5mz_13";
+const separator = "_separator_wl5mz_25";
+const current = "_current_wl5mz_31";
+const help = "_help_wl5mz_36";
+const helpLabel = "_helpLabel_wl5mz_50";
+const styles$3 = {
+  crumbs,
+  home,
+  separator,
+  current,
+  help,
+  helpLabel
+};
+function VipBreadcrumb({ title: title2, onHome }) {
+  const t = useT();
+  return jsx("nav", {
+    "aria-label": t("Breadcrumb"),
+    children: jsxs("ol", {
+      className: styles$3.crumbs,
+      children: [jsx("li", {
+        children: jsx("button", {
+          type: "button",
+          className: styles$3.home,
+          onClick: onHome,
+          children: t("Homepage")
+        })
+      }), jsx("li", {
+        className: styles$3.separator,
+        "aria-hidden": "true",
+        children: "›"
+      }), jsx("li", {
+        "aria-current": "page",
+        className: styles$3.current,
+        children: title2
+      })]
+    })
+  });
+}
+function VipHelpLink({ onHelp }) {
+  const t = useT();
+  return jsxs("button", {
+    type: "button",
+    className: styles$3.help,
+    onClick: onHelp,
+    children: [jsx(HelpIcon, {}), jsx("span", {
+      className: styles$3.helpLabel,
+      children: t("Need help with your order?")
+    })]
+  });
+}
+function VipLandingView({ token, onUnavailable, onHelp }) {
   const t = useT();
   const { api, emit } = useShop();
   const [load, setLoad] = useState({
@@ -11979,10 +12165,13 @@ function VipLandingView({ token, onUnavailable }) {
   }
   return jsx(ActiveLanding, {
     token,
-    invite
+    invite,
+    ...onHelp ? {
+      onHelp
+    } : {}
   });
 }
-function ActiveLanding({ token, invite }) {
+function ActiveLanding({ token, invite, onHelp }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -12041,7 +12230,22 @@ function ActiveLanding({ token, invite }) {
     return jsx(ProductDetail, {
       product: loaded.product,
       inventory: loaded.inventory,
-      claim
+      claim,
+      ...invite.hero ? {
+        breadcrumb: jsx(VipBreadcrumb, {
+          title: loaded.product.title,
+          onHome: product.close
+        })
+      } : {},
+      help: jsx(VipHelpLink, {
+        onHelp: () => {
+          emit({
+            type: "help_requested",
+            inviteRef: invite.invite_ref
+          });
+          onHelp?.();
+        }
+      })
     }, loaded.product.sku);
   }
   if (loaded.loading) return jsx(ScreenSkeleton, {
@@ -12298,9 +12502,9 @@ function useSlides() {
     const api = shop?.api;
     if (!api) return;
     let live = true;
-    void api.content.home().then((home) => {
-      if (!live || home.slides.length === 0) return;
-      setFetched(home.slides.map((s) => ({
+    void api.content.home().then((home2) => {
+      if (!live || home2.slides.length === 0) return;
+      setFetched(home2.slides.map((s) => ({
         key: s.key,
         title: s.title,
         subtitle: s.subtitle,
@@ -12724,30 +12928,6 @@ function OrderIcon() {
     })]
   });
 }
-function HelpIcon() {
-  return jsx("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    "aria-hidden": "true",
-    children: jsxs("g", {
-      transform: "translate(1.93 1.93)",
-      children: [jsx("path", {
-        d: "M10.0781 14.1543C10.52 14.1543 10.8779 14.5123 10.8779 14.9541C10.8778 15.3958 10.5199 15.7539 10.0781 15.7539H10.0693C9.62757 15.7539 9.26963 15.3958 9.26953 14.9541C9.26953 14.5123 9.62751 14.1543 10.0693 14.1543H10.0781Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        d: "M8.21777 4.7168C8.93457 4.29562 9.77726 4.14167 10.5967 4.28223C11.4161 4.42286 12.1599 4.84835 12.6953 5.48438C13.2303 6.12005 13.5233 6.92505 13.5225 7.75586L13.5107 8.00098C13.3992 9.19732 12.4886 10.0076 11.8057 10.4629C11.4401 10.7066 11.0785 10.8882 10.8018 11.0137V11.8223C10.8014 12.2637 10.4425 12.622 10.001 12.6221C9.55954 12.6219 9.20156 12.2637 9.20117 11.8223V10.4775C9.20117 10.1332 9.42146 9.82671 9.74805 9.71777C9.75073 9.71685 9.75671 9.71536 9.76367 9.71289C9.77824 9.70771 9.80199 9.69931 9.83301 9.6875C9.89571 9.66361 9.98896 9.62621 10.1016 9.57617C10.3291 9.47505 10.6264 9.32523 10.918 9.13086C11.5496 8.70973 11.9217 8.23795 11.9219 7.75586C11.9225 7.30239 11.7627 6.86161 11.4707 6.51465C11.1787 6.16788 10.773 5.93611 10.3262 5.85938C9.87921 5.78271 9.41933 5.86603 9.02832 6.0957C8.63742 6.32547 8.34003 6.68657 8.18945 7.11426C8.04274 7.53077 7.58557 7.74995 7.16895 7.60352C6.75252 7.45687 6.53351 7.00053 6.67969 6.58398C6.9556 5.79964 7.50096 5.1381 8.21777 4.7168Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10.0693 0C15.6304 0.000197913 20.1395 4.50828 20.1396 10.0693C20.1395 15.6304 15.6304 20.1395 10.0693 20.1396C4.50828 20.1395 0.000197917 15.6304 0 10.0693C0.00019791 4.50828 4.50828 0.000197906 10.0693 0ZM10.0693 2C5.61285 2.0002 2.0002 5.61285 2 10.0693C2.0002 14.5258 5.61285 18.1395 10.0693 18.1396C14.5258 18.1395 18.1395 14.5258 18.1396 10.0693C18.1395 5.61285 14.5258 2.0002 10.0693 2Z",
-        fill: "currentColor"
-      })]
-    })
-  });
-}
 function ChevronRight() {
   return jsx("svg", {
     width: "16",
@@ -12938,6 +13118,7 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
+    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":