@nok-integration/storefront-react 0.21.1 → 0.22.0

package/dist/standalone/storefront.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,10 +9939,10 @@ 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)
       })
@@ -9948,7 +9954,7 @@ const row$4 = "_row_1cf1a_10";
 const icon$2 = "_icon_1cf1a_16";
 const label = "_label_1cf1a_22";
 const divider$1 = "_divider_1cf1a_29";
-const styles$m = {
+const styles$o = {
   box: box$1,
   row: row$4,
   icon: icon$2,
@@ -9958,12 +9964,12 @@ 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,
+      className: styles$o.row,
       children: [jsxs("svg", {
-        className: styles$m.icon,
+        className: styles$o.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -9988,16 +9994,16 @@ function ShippingInfo() {
           strokeWidth: "1.5"
         })]
       }), 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,
+      className: styles$o.row,
       children: [jsxs("svg", {
-        className: styles$m.icon,
+        className: styles$o.icon,
         width: "24",
         height: "24",
         viewBox: "0 0 24 24",
@@ -10017,7 +10023,7 @@ function ShippingInfo() {
           strokeLinejoin: "round"
         })]
       }), jsx("p", {
-        className: styles$m.label,
+        className: styles$o.label,
         children: t("14 days returns")
       })]
     })]
@@ -10028,21 +10034,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 +10061,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 +10077,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 +10239,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 +10319,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 +10378,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 +10409,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 +10700,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 +10750,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 +10986,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 +11014,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 +11040,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 +11064,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 +11090,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 +11127,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 +11328,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 +11385,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 +11397,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 +11420,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 +11436,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 +11452,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 +11464,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 +11485,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 +11504,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 +11528,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 +11571,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 +11595,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 +11623,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 +11632,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 +11650,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 +11659,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 +11697,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 +11720,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 +11742,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 +11776,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 +11954,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 +11975,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 +12004,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 +12050,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 +12188,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 +12253,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 +12525,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 +12951,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 +13141,7 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
+    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":