@nok-integration/storefront-react 0.13.0 → 0.14.0

package/dist/index.mjs

@@ -4830,7 +4830,18 @@ function requireOrderTracking() {
       total: money_1.Money,
       item_count: zod_1.z.number().int().nonnegative(),
       /** First line's thumbnail, for the list row. Absent = render the placeholder. */
-      image: common_1.Url.optional()
+      image: common_1.Url.optional(),
+      /**
+       * Up to three line thumbnails, in line order, for the row's image strip.
+       *
+       * `image` is the first of these and stays for consumers already reading it. Capped at
+       * three because that is what the row draws: an order of twenty lines must not put twenty
+       * URLs on a list response, and the count the fan needs is already in `item_count`.
+       *
+       * Fewer than three entries is normal — an order can have one line, and a de-listed SKU
+       * resolves to no image at all. A consumer renders what it is given and never pads.
+       */
+      images: zod_1.z.array(common_1.Url).max(3).optional()
     });
     exports.OrderList = zod_1.z.object({
       orders: zod_1.z.array(exports.OrderSummaryItem)
@@ -5355,20 +5366,20 @@ function ShopImage({
     }
   );
 }
-const badge$3 = "_badge_1bagf_1";
+const badge$4 = "_badge_1bagf_1";
 const neutral$1 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$1 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$E = {
-  badge: badge$3,
+const styles$H = {
+  badge: badge$4,
   neutral: neutral$1,
   success: success$1,
   critical: critical$1,
   promo
 };
 function Badge({ tone = "neutral", children }) {
-  return /* @__PURE__ */ jsx("span", { className: [styles$E.badge, styles$E[tone]].join(" "), children });
+  return /* @__PURE__ */ jsx("span", { className: [styles$H.badge, styles$H[tone]].join(" "), children });
 }
 const button$1 = "_button_vvcmd_1";
 const fullWidth = "_fullWidth_vvcmd_23";
@@ -5378,7 +5389,7 @@ const ghost = "_ghost_vvcmd_38";
 const spinner = "_spinner_vvcmd_54";
 const spin = "_spin_vvcmd_54";
 const labelLoading = "_labelLoading_vvcmd_63";
-const styles$D = {
+const styles$G = {
   button: button$1,
   fullWidth,
   primary,
@@ -5405,23 +5416,23 @@ const Button = forwardRef(function Button2({
       ref,
       type,
       className: [
-        styles$D.button,
-        styles$D[variant],
-        fullWidth2 ? styles$D.fullWidth : "",
+        styles$G.button,
+        styles$G[variant],
+        fullWidth2 ? styles$G.fullWidth : "",
         className ?? ""
       ].filter(Boolean).join(" "),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        loading && /* @__PURE__ */ jsx("span", { className: styles$D.spinner, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: loading ? styles$D.labelLoading : void 0, children })
+        loading && /* @__PURE__ */ jsx("span", { className: styles$G.spinner, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: loading ? styles$G.labelLoading : void 0, children })
       ]
     }
   );
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$C = {
+const styles$F = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5434,14 +5445,14 @@ function Skeleton({ width, height, radius, className, circle }) {
     "span",
     {
       "aria-hidden": "true",
-      className: [styles$C.skeleton, className ?? ""].filter(Boolean).join(" "),
+      className: [styles$F.skeleton, className ?? ""].filter(Boolean).join(" "),
       style
     }
   );
 }
 const surface$1 = "_surface_nj74o_10";
 const fill = "_fill_nj74o_35";
-const styles$B = {
+const styles$E = {
   surface: surface$1,
   fill
 };
@@ -5482,7 +5493,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
       ...rest,
       ref: attach,
       "data-shop-theme": tone,
-      className: [styles$B.surface, fill2 ? styles$B.fill : "", className ?? ""].filter(Boolean).join(" "),
+      className: [styles$E.surface, fill2 ? styles$E.fill : "", className ?? ""].filter(Boolean).join(" "),
       children
     }
   );
@@ -5494,9 +5505,9 @@ const lines$2 = "_lines_ney0g_32";
 const lineWide = "_lineWide_ney0g_41";
 const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
-const row$7 = "_row_ney0g_53";
+const row$8 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$A = {
+const styles$D = {
   root: root$6,
   inner,
   media: media$3,
@@ -5504,38 +5515,38 @@ const styles$A = {
   lineWide,
   lineMid,
   lineNarrow,
-  row: row$7,
+  row: row$8,
   action: action$2
 };
 function ScreenSkeleton({ tone, shape = "media" }) {
-  return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$A.root, children: /* @__PURE__ */ jsx("div", { className: styles$A.inner, role: "status", "aria-label": "Loading", children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: styles$A.media }),
-    /* @__PURE__ */ jsxs("div", { className: styles$A.lines, children: [
-      /* @__PURE__ */ jsx(Skeleton, { height: 22, className: styles$A.lineWide }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$A.lineMid }),
-      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$A.lineNarrow })
+  return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$D.root, children: /* @__PURE__ */ jsx("div", { className: styles$D.inner, role: "status", "aria-label": "Loading", children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: styles$D.media }),
+    /* @__PURE__ */ jsxs("div", { className: styles$D.lines, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 22, className: styles$D.lineWide }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$D.lineMid }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$D.lineNarrow })
     ] }),
-    /* @__PURE__ */ jsx(Skeleton, { height: 48, radius: 8, className: styles$A.action })
-  ] }) : /* @__PURE__ */ jsx("div", { className: styles$A.lines, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { height: 72, className: styles$A.row }, i)) }) }) });
+    /* @__PURE__ */ jsx(Skeleton, { height: 48, radius: 8, className: styles$D.action })
+  ] }) : /* @__PURE__ */ jsx("div", { className: styles$D.lines, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { height: 72, className: styles$D.row }, i)) }) }) });
 }
 const root$5 = "_root_1u83t_1";
-const icon$3 = "_icon_1u83t_10";
-const title$f = "_title_1u83t_15";
+const icon$4 = "_icon_1u83t_10";
+const title$h = "_title_1u83t_15";
 const body$5 = "_body_1u83t_20";
 const action$1 = "_action_1u83t_33";
-const styles$z = {
+const styles$C = {
   root: root$5,
-  icon: icon$3,
-  title: title$f,
+  icon: icon$4,
+  title: title$h,
   body: body$5,
   action: action$1
 };
 function EmptyState({ title: title2, body: body2, action: action2, icon: icon2 }) {
-  return /* @__PURE__ */ jsxs("div", { className: styles$z.root, role: "status", children: [
-    icon2 && /* @__PURE__ */ jsx("div", { className: styles$z.icon, children: icon2 }),
-    /* @__PURE__ */ jsx("h2", { className: styles$z.title, children: title2 }),
-    body2 && /* @__PURE__ */ jsx("p", { className: styles$z.body, children: body2 }),
-    action2 && /* @__PURE__ */ jsx("div", { className: styles$z.action, children: action2 })
+  return /* @__PURE__ */ jsxs("div", { className: styles$C.root, role: "status", children: [
+    icon2 && /* @__PURE__ */ jsx("div", { className: styles$C.icon, children: icon2 }),
+    /* @__PURE__ */ jsx("h2", { className: styles$C.title, children: title2 }),
+    body2 && /* @__PURE__ */ jsx("p", { className: styles$C.body, children: body2 }),
+    action2 && /* @__PURE__ */ jsx("div", { className: styles$C.action, children: action2 })
   ] });
 }
 const TREATMENTS = {
@@ -5664,19 +5675,19 @@ function isDuplicateOrder(err) {
   return codeOf(err) === "duplicate_order";
 }
 const root$4 = "_root_1lbpx_1";
-const title$e = "_title_1lbpx_10";
+const title$g = "_title_1lbpx_10";
 const body$4 = "_body_1lbpx_15";
-const styles$y = {
+const styles$B = {
   root: root$4,
-  title: title$e,
+  title: title$g,
   body: body$4
 };
 function ErrorState({ code, title: title2, body: body2, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
-  return /* @__PURE__ */ jsxs("div", { className: styles$y.root, role: "alert", children: [
-    /* @__PURE__ */ jsx("h2", { className: styles$y.title, children: title2 ?? treatment.title }),
-    /* @__PURE__ */ jsx("p", { className: styles$y.body, children: body2 ?? treatment.body }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$B.root, role: "alert", children: [
+    /* @__PURE__ */ jsx("h2", { className: styles$B.title, children: title2 ?? treatment.title }),
+    /* @__PURE__ */ jsx("p", { className: styles$B.body, children: body2 ?? treatment.body }),
     showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? "Try again" })
   ] });
 }
@@ -5703,7 +5714,7 @@ function StatusBadge({ status: status2 }) {
 }
 const viewport = "_viewport_1lt9i_1";
 const toast = "_toast_1lt9i_15";
-const text$3 = "_text_1lt9i_32";
+const text$4 = "_text_1lt9i_32";
 const message$1 = "_message_1lt9i_39";
 const action = "_action_1lt9i_44";
 const neutral = "_neutral_1lt9i_63";
@@ -5713,10 +5724,10 @@ const rich = "_rich_1lt9i_81";
 const description = "_description_1lt9i_96";
 const thumb$1 = "_thumb_1lt9i_113";
 const thumbImage = "_thumbImage_1lt9i_124";
-const styles$x = {
+const styles$A = {
   viewport,
   toast,
-  text: text$3,
+  text: text$4,
   message: message$1,
   action,
   neutral,
@@ -5777,24 +5788,24 @@ function ToastProvider({ children }) {
   const api = useMemo(() => ({ show }), [show]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx("div", { className: styles$x.viewport, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((t) => {
+    /* @__PURE__ */ jsx("div", { className: styles$A.viewport, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((t) => {
       const rich2 = Boolean(t.description || t.image);
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: [styles$x.toast, rich2 ? styles$x.rich : styles$x[t.tone]].join(" "),
+          className: [styles$A.toast, rich2 ? styles$A.rich : styles$A[t.tone]].join(" "),
           role: "status",
           children: [
-            t.image && /* @__PURE__ */ jsx("span", { className: styles$x.thumb, children: /* @__PURE__ */ jsx(ShopImage, { src: t.image, alt: "", fill: true, sizes: "40px", className: styles$x.thumbImage }) }),
-            /* @__PURE__ */ jsxs("span", { className: styles$x.text, children: [
-              /* @__PURE__ */ jsx("span", { className: styles$x.message, children: t.message }),
-              t.description && /* @__PURE__ */ jsx("span", { className: styles$x.description, children: t.description })
+            t.image && /* @__PURE__ */ jsx("span", { className: styles$A.thumb, children: /* @__PURE__ */ jsx(ShopImage, { src: t.image, alt: "", fill: true, sizes: "40px", className: styles$A.thumbImage }) }),
+            /* @__PURE__ */ jsxs("span", { className: styles$A.text, children: [
+              /* @__PURE__ */ jsx("span", { className: styles$A.message, children: t.message }),
+              t.description && /* @__PURE__ */ jsx("span", { className: styles$A.description, children: t.description })
             ] }),
             t.action && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: styles$x.action,
+                className: styles$A.action,
                 onClick: () => {
                   t.action?.onAction();
                   dismiss(t.id);
@@ -5855,15 +5866,15 @@ function useLocale(override) {
   const shop = useShopOptional();
   return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
 }
-const badge$2 = "_badge_156ya_2";
-const icon$2 = "_icon_156ya_18";
-const styles$w = {
-  badge: badge$2,
-  icon: icon$2
+const badge$3 = "_badge_156ya_2";
+const icon$3 = "_icon_156ya_18";
+const styles$z = {
+  badge: badge$3,
+  icon: icon$3
 };
 function SaleBadge({ pct }) {
-  return /* @__PURE__ */ jsxs("span", { className: styles$w.badge, children: [
-    /* @__PURE__ */ jsxs("svg", { className: styles$w.icon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs("span", { className: styles$z.badge, children: [
+    /* @__PURE__ */ jsxs("svg", { className: styles$z.icon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(
         "path",
         {
@@ -5889,7 +5900,7 @@ const lg = "_lg_n3nm5_27";
 const price$1 = "_price_n3nm5_31";
 const compareAt = "_compareAt_n3nm5_36";
 const strikethrough = "_strikethrough_n3nm5_44";
-const styles$v = {
+const styles$y = {
   root: root$3,
   center: center$1,
   end,
@@ -5911,9 +5922,9 @@ function PriceBlock({
   const { format } = useMoney();
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
-  return /* @__PURE__ */ jsxs("div", { className: [styles$v.root, styles$v[size], styles$v[align], styles$v[variant]].join(" "), children: [
-    /* @__PURE__ */ jsx("span", { className: styles$v.price, children: format(price2) }),
-    hasCompare && /* @__PURE__ */ jsxs("span", { className: styles$v.compareAt, children: [
+  return /* @__PURE__ */ jsxs("div", { className: [styles$y.root, styles$y[size], styles$y[align], styles$y[variant]].join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: styles$y.price, children: format(price2) }),
+    hasCompare && /* @__PURE__ */ jsxs("span", { className: styles$y.compareAt, children: [
       /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Was " }),
       format(compareAt2)
     ] }),
@@ -6009,52 +6020,52 @@ function swatchColour(name) {
   return SWATCH_HEX[name.toLowerCase().trim()] ?? "#c9cdd0";
 }
 const timeline = "_timeline_1j37h_7";
-const row$6 = "_row_1j37h_15";
+const row$7 = "_row_1j37h_15";
 const line$1 = "_line_1j37h_20";
 const marker = "_marker_1j37h_27";
 const tick = "_tick_1j37h_35";
 const pending$2 = "_pending_1j37h_44";
 const connector = "_connector_1j37h_68";
-const text$2 = "_text_1j37h_84";
+const text$3 = "_text_1j37h_84";
 const label$1 = "_label_1j37h_101";
 const past = "_past_1j37h_113";
 const current = "_current_1j37h_118";
 const future = "_future_1j37h_123";
-const date = "_date_1j37h_128";
-const styles$u = {
+const date$1 = "_date_1j37h_128";
+const styles$x = {
   timeline,
-  row: row$6,
+  row: row$7,
   line: line$1,
   marker,
   tick,
   pending: pending$2,
   connector,
-  text: text$2,
+  text: text$3,
   label: label$1,
   past,
   current,
   future,
-  date
+  date: date$1
 };
-function OrderTimeline({ progress, locale: localeProp }) {
+function OrderTimeline({ progress: progress2, locale: localeProp }) {
   const locale = useLocale(localeProp);
-  const currentIndex = progress.findIndex((e) => e.current);
-  return /* @__PURE__ */ jsx("ol", { className: styles$u.timeline, children: progress.map((entry, i) => {
+  const currentIndex = progress2.findIndex((e) => e.current);
+  return /* @__PURE__ */ jsx("ol", { className: styles$x.timeline, children: progress2.map((entry, i) => {
     const state = stateOf(entry, i, currentIndex);
     return /* @__PURE__ */ jsxs(
       "li",
       {
-        className: styles$u.row,
+        className: styles$x.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: styles$u.line, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$u.marker, children: state === "future" ? /* @__PURE__ */ jsx("span", { className: styles$u.pending, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(StepTick, { tone: state }) }),
-            /* @__PURE__ */ jsxs("span", { className: styles$u.text, children: [
-              /* @__PURE__ */ jsx("span", { className: [styles$u.label, styles$u[state]].join(" "), children: entry.label }),
-              entry.at && /* @__PURE__ */ jsx("time", { className: styles$u.date, dateTime: entry.at, children: formatStepDate(entry.at, locale) })
+          /* @__PURE__ */ jsxs("div", { className: styles$x.line, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$x.marker, children: state === "future" ? /* @__PURE__ */ jsx("span", { className: styles$x.pending, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(StepTick, { tone: state }) }),
+            /* @__PURE__ */ jsxs("span", { className: styles$x.text, children: [
+              /* @__PURE__ */ jsx("span", { className: [styles$x.label, styles$x[state]].join(" "), children: entry.label }),
+              entry.at && /* @__PURE__ */ jsx("time", { className: styles$x.date, dateTime: entry.at, children: formatStepDate(entry.at, locale) })
             ] })
           ] }),
-          i < progress.length - 1 && /* @__PURE__ */ jsx("span", { className: styles$u.connector, "aria-hidden": "true" })
+          i < progress2.length - 1 && /* @__PURE__ */ jsx("span", { className: styles$x.connector, "aria-hidden": "true" })
         ]
       },
       entry.step
@@ -6070,7 +6081,7 @@ function StepTick({ tone }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: styles$u.tick,
+      className: styles$x.tick,
       width: "28",
       height: "28",
       viewBox: "0 0 28 28",
@@ -6104,12 +6115,12 @@ function formatStepDate(iso, locale) {
   return `${weekday}, ${dayMonth}`;
 }
 const summary = "_summary_1h18y_2";
-const row$5 = "_row_1h18y_8";
+const row$6 = "_row_1h18y_8";
 const free = "_free_1h18y_36";
 const pending$1 = "_pending_1h18y_42";
-const styles$t = {
+const styles$w = {
   summary,
-  row: row$5,
+  row: row$6,
   free,
   pending: pending$1
 };
@@ -6124,26 +6135,26 @@ function OrderSummary({ pricing, deferred = [], rows = CART_ROWS }) {
   const isDeferred = (key) => deferred.includes(key);
   const anyDeferred = deferred.length > 0;
   const visible = rows.filter((row2) => row2.key !== "total" || !anyDeferred);
-  return /* @__PURE__ */ jsx("dl", { className: styles$t.summary, children: visible.map(({ label: label2, key }) => {
+  return /* @__PURE__ */ jsx("dl", { className: styles$w.summary, children: visible.map(({ label: label2, key }) => {
     const pending2 = key !== "total" && isDeferred(key);
-    return /* @__PURE__ */ jsxs("div", { className: styles$t.row, children: [
+    return /* @__PURE__ */ jsxs("div", { className: styles$w.row, children: [
       /* @__PURE__ */ jsx("dt", { children: label2 }),
-      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$t.pending : void 0, children: pending2 ? "Calculated at checkout" : renderValue(key, pricing, format) })
+      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$w.pending : void 0, children: pending2 ? "Calculated at checkout" : renderValue(key, pricing, format) })
     ] }, key);
   }) });
 }
 function renderValue(key, pricing, format) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
-    return /* @__PURE__ */ jsx("span", { className: styles$t.free, children: "Free" });
+    return /* @__PURE__ */ jsx("span", { className: styles$w.free, children: "Free" });
   }
   return format(pricing[key]);
 }
-const page$1 = "_page_1eqkm_1";
+const page$2 = "_page_1eqkm_1";
 const status = "_status_1eqkm_10";
 const widget = "_widget_1eqkm_18";
-const title$d = "_title_1eqkm_24";
+const title$f = "_title_1eqkm_24";
 const headline = "_headline_1eqkm_30";
-const subtitle$2 = "_subtitle_1eqkm_37";
+const subtitle$3 = "_subtitle_1eqkm_37";
 const dot$3 = "_dot_1eqkm_48";
 const trackButton = "_trackButton_1eqkm_58";
 const srOnly = "_srOnly_1eqkm_78";
@@ -6154,8 +6165,8 @@ const count$1 = "_count_1eqkm_115";
 const lines$1 = "_lines_1eqkm_130";
 const line = "_line_1eqkm_130";
 const thumb = "_thumb_1eqkm_152";
-const image$7 = "_image_1eqkm_162";
-const placeholder$4 = "_placeholder_1eqkm_166";
+const image$8 = "_image_1eqkm_162";
+const placeholder$5 = "_placeholder_1eqkm_166";
 const lineBody = "_lineBody_1eqkm_172";
 const lineText = "_lineText_1eqkm_180";
 const lineTitle = "_lineTitle_1eqkm_189";
@@ -6170,13 +6181,13 @@ const last4 = "_last4_1eqkm_256";
 const brand = "_brand_1eqkm_262";
 const divider$2 = "_divider_1eqkm_268";
 const summaryCard = "_summaryCard_1eqkm_275";
-const styles$s = {
-  page: page$1,
+const styles$v = {
+  page: page$2,
   status,
   widget,
-  title: title$d,
+  title: title$f,
   headline,
-  subtitle: subtitle$2,
+  subtitle: subtitle$3,
   dot: dot$3,
   trackButton,
   srOnly,
@@ -6187,8 +6198,8 @@ const styles$s = {
   lines: lines$1,
   line,
   thumb,
-  image: image$7,
-  placeholder: placeholder$4,
+  image: image$8,
+  placeholder: placeholder$5,
   lineBody,
   lineText,
   lineTitle,
@@ -6233,7 +6244,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
     void load();
   }, [load]);
   if (state === "loading") {
-    return /* @__PURE__ */ jsxs("div", { className: styles$s.page, children: [
+    return /* @__PURE__ */ jsxs("div", { className: styles$v.page, children: [
       /* @__PURE__ */ jsx(Skeleton, { height: 120, radius: 8 }),
       /* @__PURE__ */ jsx(Skeleton, { height: 220, radius: 18 }),
       /* @__PURE__ */ jsx(Skeleton, { height: 140, radius: 18 })
@@ -6242,34 +6253,34 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
   if (state === "error" || !order) {
     return /* @__PURE__ */ jsx(ErrorState, { code: errorCode, onRetry: () => void load() });
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$s.page, children: [
-    /* @__PURE__ */ jsxs("section", { className: styles$s.status, "aria-label": "Delivery status", children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$s.title, children: [
-        /* @__PURE__ */ jsx("h1", { className: styles$s.headline, children: order.headline }),
-        /* @__PURE__ */ jsxs("p", { className: styles$s.subtitle, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$v.page, children: [
+    /* @__PURE__ */ jsxs("section", { className: styles$v.status, "aria-label": "Delivery status", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$v.title, children: [
+        /* @__PURE__ */ jsx("h1", { className: styles$v.headline, children: order.headline }),
+        /* @__PURE__ */ jsxs("p", { className: styles$v.subtitle, children: [
           /* @__PURE__ */ jsxs("span", { children: [
             "Order #",
-            shortRef(order.order_ref)
+            shortRef$1(order.order_ref)
           ] }),
-          /* @__PURE__ */ jsx("span", { className: styles$s.dot, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: styles$v.dot, "aria-hidden": "true" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Placed ",
-            formatPlaced(order.placed_at, locale)
+            formatPlaced$1(order.placed_at, locale)
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles$s.widget, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$v.widget, children: [
         /* @__PURE__ */ jsx(OrderTimeline, { progress: order.progress, locale }),
         order.tracking?.url && /* @__PURE__ */ jsxs(
           "a",
           {
-            className: styles$s.trackButton,
+            className: styles$v.trackButton,
             href: order.tracking.url,
             target: "_blank",
             rel: "noopener noreferrer",
             children: [
               "Track order",
-              /* @__PURE__ */ jsxs("span", { className: styles$s.srOnly, children: [
+              /* @__PURE__ */ jsxs("span", { className: styles$v.srOnly, children: [
                 " (opens ",
                 order.tracking.carrier,
                 " in a new tab)"
@@ -6280,18 +6291,18 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx(ItemsCard, { order }),
-    /* @__PURE__ */ jsxs("section", { className: styles$s.details, "aria-label": "Delivery and payment", children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$s.detailBlock, children: [
-        /* @__PURE__ */ jsx("h2", { className: styles$s.detailLabel, children: "Shipping address" }),
-        /* @__PURE__ */ jsx("p", { className: styles$s.detailValue, children: formatAddress(order.ship_to) })
+    /* @__PURE__ */ jsxs("section", { className: styles$v.details, "aria-label": "Delivery and payment", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$v.detailBlock, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles$v.detailLabel, children: "Shipping address" }),
+        /* @__PURE__ */ jsx("p", { className: styles$v.detailValue, children: formatAddress(order.ship_to) })
       ] }),
       order.payment && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles$s.divider, role: "presentation" }),
-        /* @__PURE__ */ jsxs("div", { className: [styles$s.detailBlock, styles$s.payment].join(" "), children: [
-          /* @__PURE__ */ jsx("h2", { className: styles$s.detailLabel, children: "Payment" }),
-          /* @__PURE__ */ jsxs("p", { className: styles$s.detailValue, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$s.brand, children: order.payment.brand }),
-            order.payment.last4 && /* @__PURE__ */ jsxs("span", { className: styles$s.last4, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$v.divider, role: "presentation" }),
+        /* @__PURE__ */ jsxs("div", { className: [styles$v.detailBlock, styles$v.payment].join(" "), children: [
+          /* @__PURE__ */ jsx("h2", { className: styles$v.detailLabel, children: "Payment" }),
+          /* @__PURE__ */ jsxs("p", { className: styles$v.detailValue, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$v.brand, children: order.payment.brand }),
+            order.payment.last4 && /* @__PURE__ */ jsxs("span", { className: styles$v.last4, children: [
               "•••• ",
               order.payment.last4
             ] })
@@ -6299,27 +6310,27 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: styles$s.summaryCard, "aria-label": "Order summary", children: [
-      /* @__PURE__ */ jsx("h2", { className: styles$s.cardTitle, children: "Order summary" }),
+    /* @__PURE__ */ jsxs("section", { className: styles$v.summaryCard, "aria-label": "Order summary", children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$v.cardTitle, children: "Order summary" }),
       /* @__PURE__ */ jsx(OrderSummary, { pricing: toPricing(order), rows: SUMMARY_ROWS })
     ] })
   ] });
 }
 function ItemsCard({ order }) {
   const { format } = useMoney();
-  return /* @__PURE__ */ jsxs("section", { className: styles$s.itemsCard, "aria-label": "Items", children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$s.cardHeader, children: [
-      /* @__PURE__ */ jsx("h2", { className: styles$s.cardTitle, children: "Items" }),
-      /* @__PURE__ */ jsx("span", { className: styles$s.count, children: order.items.reduce((n, i) => n + i.qty, 0) })
+  return /* @__PURE__ */ jsxs("section", { className: styles$v.itemsCard, "aria-label": "Items", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$v.cardHeader, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$v.cardTitle, children: "Items" }),
+      /* @__PURE__ */ jsx("span", { className: styles$v.count, children: order.items.reduce((n, i) => n + i.qty, 0) })
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: styles$s.lines, children: order.items.map((item2) => /* @__PURE__ */ jsxs("li", { className: styles$s.line, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$s.thumb, children: item2.image ? /* @__PURE__ */ jsx(ShopImage, { src: item2.image, alt: "", fill: true, sizes: "48px", className: styles$s.image }) : /* @__PURE__ */ jsx("div", { className: styles$s.placeholder, "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles$s.lineBody, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$s.lineText, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$s.lineTitle, children: item2.title ?? item2.sku }),
-          detailsOf(item2).length > 0 && /* @__PURE__ */ jsx("span", { className: styles$s.lineDetails, children: detailsOf(item2).map((detail2) => /* @__PURE__ */ jsx("span", { children: detail2 }, detail2)) })
+    /* @__PURE__ */ jsx("ul", { className: styles$v.lines, children: order.items.map((item2) => /* @__PURE__ */ jsxs("li", { className: styles$v.line, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$v.thumb, children: item2.image ? /* @__PURE__ */ jsx(ShopImage, { src: item2.image, alt: "", fill: true, sizes: "48px", className: styles$v.image }) : /* @__PURE__ */ jsx("div", { className: styles$v.placeholder, "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles$v.lineBody, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$v.lineText, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$v.lineTitle, children: item2.title ?? item2.sku }),
+          detailsOf(item2).length > 0 && /* @__PURE__ */ jsx("span", { className: styles$v.lineDetails, children: detailsOf(item2).map((detail2) => /* @__PURE__ */ jsx("span", { children: detail2 }, detail2)) })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: styles$s.linePrice, children: format(item2.line_total) })
+        /* @__PURE__ */ jsx("span", { className: styles$v.linePrice, children: format(item2.line_total) })
       ] })
     ] }, item2.line_ref)) })
   ] });
@@ -6336,10 +6347,10 @@ function toPricing(order) {
     total: order.totals.grand_total
   };
 }
-function shortRef(orderRef) {
+function shortRef$1(orderRef) {
   return orderRef.replace(/^ord_/, "");
 }
-function formatPlaced(iso, locale) {
+function formatPlaced$1(iso, locale) {
   return new Date(iso).toLocaleDateString(locale, {
     day: "numeric",
     month: "short",
@@ -6349,6 +6360,202 @@ function formatPlaced(iso, locale) {
 function formatAddress(address) {
   return [address.line1, address.line2, address.postcode, address.city, address.country].filter(Boolean).join(", ");
 }
+const badge$2 = "_badge_ghd02_6";
+const progress = "_progress_ghd02_22";
+const delivered = "_delivered_ghd02_27";
+const cancelled = "_cancelled_ghd02_32";
+const styles$u = {
+  badge: badge$2,
+  progress,
+  delivered,
+  cancelled
+};
+const LABEL = {
+  packing: "In progress",
+  on_its_way: "In progress",
+  out_for_delivery: "In progress",
+  delivered: "Delivered",
+  cancelled: "Cancelled"
+};
+const TONE = {
+  packing: "progress",
+  on_its_way: "progress",
+  out_for_delivery: "progress",
+  delivered: "delivered",
+  cancelled: "cancelled"
+};
+function OrderStatusBadge({ status: status2 }) {
+  const label2 = LABEL[status2] ?? status2.replace(/_/g, " ");
+  const tone = TONE[status2] ?? "progress";
+  return /* @__PURE__ */ jsx("span", { className: [styles$u.badge, styles$u[tone]].join(" "), children: label2 });
+}
+const page$1 = "_page_y686q_2";
+const empty = "_empty_y686q_11";
+const cta$1 = "_cta_y686q_22";
+const card$1 = "_card_y686q_45";
+const tappable = "_tappable_y686q_60";
+const head$1 = "_head_y686q_69";
+const heading = "_heading_y686q_77";
+const title$e = "_title_y686q_86";
+const date = "_date_y686q_97";
+const bottom$1 = "_bottom_y686q_102";
+const strip = "_strip_y686q_110";
+const tile$2 = "_tile_y686q_115";
+const image$7 = "_image_y686q_125";
+const placeholder$4 = "_placeholder_y686q_129";
+const more = "_more_y686q_136";
+const chevron$3 = "_chevron_y686q_149";
+const styles$t = {
+  page: page$1,
+  empty,
+  cta: cta$1,
+  card: card$1,
+  tappable,
+  head: head$1,
+  heading,
+  title: title$e,
+  date,
+  bottom: bottom$1,
+  strip,
+  tile: tile$2,
+  image: image$7,
+  placeholder: placeholder$4,
+  more,
+  chevron: chevron$3
+};
+const TILES = 3;
+function Chevron() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M9 5.5l6.5 6.5L9 18.5",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function OrderListView(props) {
+  return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderListContent, { ...props }) });
+}
+function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp }) {
+  const { api } = useShop();
+  const locale = useLocale(localeProp);
+  const [orders2, setOrders] = useState([]);
+  const [state, setState] = useState("loading");
+  const [errorCode, setErrorCode] = useState(void 0);
+  const load = useCallback(async () => {
+    setState("loading");
+    try {
+      const { orders: rows } = await api.orders.list();
+      setOrders(rows);
+      setState("ready");
+    } catch (err) {
+      setErrorCode(codeOf(err));
+      setState("error");
+    }
+  }, [api]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  if (state === "loading") {
+    return /* @__PURE__ */ jsxs("div", { className: styles$t.page, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 148, radius: 12 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 148, radius: 12 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 148, radius: 12 })
+    ] });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsx(ErrorState, { code: errorCode, onRetry: () => void load() });
+  }
+  if (orders2.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: styles$t.empty, children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "Nothing here yet",
+        body: "Your orders will show up here once you've shopped.",
+        ...onStartShopping ? {
+          action: /* @__PURE__ */ jsx("button", { type: "button", className: styles$t.cta, onClick: onStartShopping, children: "Find my fit" })
+        } : {}
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: styles$t.page, children: orders2.map((order) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    OrderCard,
+    {
+      order,
+      locale,
+      ...onOpenOrder ? { onOpen: () => onOpenOrder(order.order_ref) } : {}
+    }
+  ) }, order.order_ref)) });
+}
+function OrderCard({
+  order,
+  locale,
+  onOpen
+}) {
+  const body2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$t.head, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$t.heading, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles$t.title, children: [
+          "Order #",
+          shortRef(order.order_ref)
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles$t.date, children: formatPlaced(order.placed_at, locale) })
+      ] }),
+      /* @__PURE__ */ jsx(OrderStatusBadge, { status: order.status })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles$t.bottom, children: [
+      /* @__PURE__ */ jsx(Thumbnails, { order }),
+      onOpen && /* @__PURE__ */ jsx("span", { className: styles$t.chevron, children: /* @__PURE__ */ jsx(Chevron, {}) })
+    ] })
+  ] });
+  if (!onOpen) return /* @__PURE__ */ jsx("div", { className: styles$t.card, children: body2 });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: [styles$t.card, styles$t.tappable].join(" "),
+      onClick: onOpen,
+      "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
+      children: body2
+    }
+  );
+}
+function Thumbnails({ order }) {
+  const images = order.images ?? (order.image ? [order.image] : []);
+  const hidden = order.item_count - TILES + 1;
+  const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: styles$t.strip, children: /* @__PURE__ */ jsx("div", { className: [styles$t.tile, styles$t.placeholder].join(" "), "aria-hidden": "true" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles$t.strip, children: images.map((src, i) => {
+    const last = i === images.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: styles$t.tile, children: [
+      /* @__PURE__ */ jsx(ShopImage, { src, alt: "", fill: true, sizes: "56px", className: styles$t.image }),
+      overflow > 0 && last && /* @__PURE__ */ jsxs("span", { className: styles$t.more, children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+          "+",
+          overflow
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
+          "and ",
+          overflow,
+          " more items"
+        ] })
+      ] })
+    ] }, `${src}-${i}`);
+  }) });
+}
+function shortRef(orderRef) {
+  return orderRef.replace(/^ord_/, "");
+}
+function formatPlaced(iso, locale) {
+  const date2 = new Date(iso);
+  const day = date2.toLocaleDateString(locale, { day: "numeric", month: "short" });
+  return `${day}, ${date2.toLocaleDateString(locale, { year: "numeric" })}`;
+}
 const tile$1 = "_tile_1u9l8_3";
 const media$2 = "_media_1u9l8_11";
 const image$6 = "_image_1u9l8_21";
@@ -6358,13 +6565,13 @@ const saleBadge$1 = "_saleBadge_1u9l8_56";
 const oos$2 = "_oos_1u9l8_63";
 const bottom = "_bottom_1u9l8_88";
 const titlePrice$1 = "_titlePrice_1u9l8_1";
-const title$c = "_title_1u9l8_1";
+const title$d = "_title_1u9l8_1";
 const swatches = "_swatches_1u9l8_119";
 const swatch = "_swatch_1u9l8_119";
 const swatchActive = "_swatchActive_1u9l8_132";
 const swatchDot = "_swatchDot_1u9l8_136";
 const large = "_large_1u9l8_147";
-const styles$r = {
+const styles$s = {
   tile: tile$1,
   media: media$2,
   image: image$6,
@@ -6374,7 +6581,7 @@ const styles$r = {
   oos: oos$2,
   bottom,
   titlePrice: titlePrice$1,
-  title: title$c,
+  title: title$d,
   swatches,
   swatch,
   swatchActive,
@@ -6391,9 +6598,9 @@ function ProductTile({ product, priority, size = "default" }) {
     ShopLink,
     {
       to: `/product/${encodeURIComponent(product.sku)}`,
-      className: [styles$r.tile, size === "large" ? styles$r.large : ""].join(" "),
+      className: [styles$s.tile, size === "large" ? styles$s.large : ""].join(" "),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$r.media, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$s.media, children: [
           image2 ? /* @__PURE__ */ jsx(
             ShopImage,
             {
@@ -6401,17 +6608,17 @@ function ProductTile({ product, priority, size = "default" }) {
               alt: product.title,
               fill: true,
               sizes: size === "large" ? "(max-width: 480px) 100vw, 480px" : "(max-width: 480px) 45vw, 200px",
-              className: styles$r.image,
+              className: styles$s.image,
               priority
             }
-          ) : /* @__PURE__ */ jsx("div", { className: styles$r.placeholder, "aria-hidden": "true" }),
-          anyInStock && topBadge2 && /* @__PURE__ */ jsx("span", { className: styles$r.topBadge, children: topBadge2 }),
-          anyInStock && pct !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$r.saleBadge, children: /* @__PURE__ */ jsx(SaleBadge, { pct }) }),
-          !anyInStock && /* @__PURE__ */ jsx("span", { className: styles$r.oos, children: "Out of stock" })
+          ) : /* @__PURE__ */ jsx("div", { className: styles$s.placeholder, "aria-hidden": "true" }),
+          anyInStock && topBadge2 && /* @__PURE__ */ jsx("span", { className: styles$s.topBadge, children: topBadge2 }),
+          anyInStock && pct !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$s.saleBadge, children: /* @__PURE__ */ jsx(SaleBadge, { pct }) }),
+          !anyInStock && /* @__PURE__ */ jsx("span", { className: styles$s.oos, children: "Out of stock" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$r.bottom, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles$r.titlePrice, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$r.title, children: product.title }),
+        /* @__PURE__ */ jsxs("div", { className: styles$s.bottom, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$s.titlePrice, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$s.title, children: product.title }),
             /* @__PURE__ */ jsx(
               PriceBlock,
               {
@@ -6423,11 +6630,11 @@ function ProductTile({ product, priority, size = "default" }) {
               }
             )
           ] }),
-          swatches2.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$r.swatches, "aria-hidden": "true", children: swatches2.map((c, i) => /* @__PURE__ */ jsx(
+          swatches2.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$s.swatches, "aria-hidden": "true", children: swatches2.map((c, i) => /* @__PURE__ */ jsx(
             "span",
             {
-              className: [styles$r.swatch, i === 0 ? styles$r.swatchActive : ""].join(" "),
-              children: /* @__PURE__ */ jsx("span", { className: styles$r.swatchDot, style: { background: swatchColour(c.value) } })
+              className: [styles$s.swatch, i === 0 ? styles$s.swatchActive : ""].join(" "),
+              children: /* @__PURE__ */ jsx("span", { className: styles$s.swatchDot, style: { background: swatchColour(c.value) } })
             },
             c.value
           )) })
@@ -6441,7 +6648,7 @@ const chips$1 = "_chips_fn0g9_8";
 const chip$1 = "_chip_fn0g9_8";
 const on = "_on_fn0g9_29";
 const clear = "_clear_fn0g9_35";
-const styles$q = {
+const styles$r = {
   bar: bar$1,
   chips: chips$1,
   chip: chip$1,
@@ -6450,27 +6657,27 @@ const styles$q = {
 };
 function FilterBar({ options: options2, active, onToggle, onClear }) {
   const hasActive = active.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: styles$q.bar, role: "group", "aria-label": "Filters", children: [
-    /* @__PURE__ */ jsx("div", { className: styles$q.chips, children: options2.map((opt) => {
+  return /* @__PURE__ */ jsxs("div", { className: styles$r.bar, role: "group", "aria-label": "Filters", children: [
+    /* @__PURE__ */ jsx("div", { className: styles$r.chips, children: options2.map((opt) => {
       const on2 = active.includes(opt.value);
       return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-pressed": on2,
-          className: [styles$q.chip, on2 ? styles$q.on : ""].join(" "),
+          className: [styles$r.chip, on2 ? styles$r.on : ""].join(" "),
           onClick: () => onToggle(opt.value),
           children: opt.label
         },
         opt.value
       );
     }) }),
-    hasActive && onClear && /* @__PURE__ */ jsx("button", { type: "button", className: styles$q.clear, onClick: onClear, children: "Clear" })
+    hasActive && onClear && /* @__PURE__ */ jsx("button", { type: "button", className: styles$r.clear, onClick: onClear, children: "Clear" })
   ] });
 }
 const wrap$2 = "_wrap_15ntf_1";
 const grid$1 = "_grid_15ntf_7";
-const styles$p = {
+const styles$q = {
   wrap: wrap$2,
   grid: grid$1
 };
@@ -6515,7 +6722,7 @@ function ProductGrid({
     return () => observer.disconnect();
   }, [loadMore]);
   const visible = active.length === 0 ? products : products.filter((p) => active.includes(p.category));
-  return /* @__PURE__ */ jsxs("div", { className: styles$p.wrap, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$q.wrap, children: [
     filters.length > 0 && /* @__PURE__ */ jsx(
       FilterBar,
       {
@@ -6532,22 +6739,22 @@ function ProductGrid({
         body: "Nothing matches these filters.",
         action: active.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setActive([]), children: "Clear filters" }) : void 0
       }
-    ) : /* @__PURE__ */ jsx("ul", { className: styles$p.grid, children: visible.map((product, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ProductTile, { product, priority: i < 4 }) }, product.sku)) }),
-    loading && /* @__PURE__ */ jsx("div", { className: styles$p.grid, "aria-hidden": "true", children: [0, 1].map((i) => /* @__PURE__ */ jsx(Skeleton, { height: 200, radius: 12 }, i)) }),
+    ) : /* @__PURE__ */ jsx("ul", { className: styles$q.grid, children: visible.map((product, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ProductTile, { product, priority: i < 4 }) }, product.sku)) }),
+    loading && /* @__PURE__ */ jsx("div", { className: styles$q.grid, "aria-hidden": "true", children: [0, 1].map((i) => /* @__PURE__ */ jsx(Skeleton, { height: 200, radius: 12 }, i)) }),
     /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true" })
   ] });
 }
 const rail = "_rail_5z5e9_2";
-const header$5 = "_header_5z5e9_9";
-const title$b = "_title_5z5e9_16";
+const header$6 = "_header_5z5e9_9";
+const title$c = "_title_5z5e9_16";
 const seeAll = "_seeAll_5z5e9_22";
 const track$3 = "_track_5z5e9_28";
 const item = "_item_5z5e9_45";
 const inset = "_inset_5z5e9_57";
-const styles$o = {
+const styles$p = {
   rail,
-  header: header$5,
-  title: title$b,
+  header: header$6,
+  title: title$c,
   seeAll,
   track: track$3,
   item,
@@ -6555,62 +6762,16 @@ const styles$o = {
 };
 function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
   if (products.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { className: [styles$o.rail, inset2 ? styles$o.inset : ""].join(" "), "aria-label": title2, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$o.header, children: [
-      /* @__PURE__ */ jsx("h2", { className: styles$o.title, children: title2 }),
-      seeAllTo && /* @__PURE__ */ jsx(ShopLink, { className: styles$o.seeAll, to: seeAllTo, children: "See all" })
+  return /* @__PURE__ */ jsxs("section", { className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "), "aria-label": title2, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$p.header, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$p.title, children: title2 }),
+      seeAllTo && /* @__PURE__ */ jsx(ShopLink, { className: styles$p.seeAll, to: seeAllTo, children: "See all" })
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: styles$o.track, children: products.map((product, i) => /* @__PURE__ */ jsx("li", { className: styles$o.item, children: /* @__PURE__ */ jsx(ProductTile, { product, priority: i < 2 }) }, product.sku)) })
+    /* @__PURE__ */ jsx("ul", { className: styles$p.track, children: products.map((product, i) => /* @__PURE__ */ jsx("li", { className: styles$p.item, children: /* @__PURE__ */ jsx(ProductTile, { product, priority: i < 2 }) }, product.sku)) })
   ] });
 }
-const overlay$1 = "_overlay_s4eai_1";
-const scrim$3 = "_scrim_s4eai_10";
-const sheet$1 = "_sheet_s4eai_16";
-const grabArea = "_grabArea_s4eai_41";
-const grabber$1 = "_grabber_s4eai_51";
-const header$4 = "_header_s4eai_59";
-const title$a = "_title_s4eai_67";
-const close$1 = "_close_s4eai_71";
-const body$3 = "_body_s4eai_84";
-const footer = "_footer_s4eai_90";
-const styles$n = {
-  overlay: overlay$1,
-  scrim: scrim$3,
-  sheet: sheet$1,
-  grabArea,
-  grabber: grabber$1,
-  header: header$4,
-  title: title$a,
-  close: close$1,
-  body: body$3,
-  footer
-};
 const FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
-const DISMISS_THRESHOLD_PX = 96;
-function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }) {
-  const sheetRef = useRef(null);
-  const previouslyFocused = useRef(null);
-  const dragStartY = useRef(null);
-  const dragDistance = useRef(0);
-  const [dragY, setDragY] = useState(0);
-  const titleId = "bottomsheet-title";
-  const onDragStart = useCallback((clientY) => {
-    dragStartY.current = clientY;
-  }, []);
-  const onDragMove = useCallback((clientY) => {
-    if (dragStartY.current === null) return;
-    const distance = Math.max(0, clientY - dragStartY.current);
-    dragDistance.current = distance;
-    setDragY(distance);
-  }, []);
-  const onDragEnd = useCallback(() => {
-    if (dragStartY.current === null) return;
-    dragStartY.current = null;
-    const dismissed = dragDistance.current > DISMISS_THRESHOLD_PX;
-    dragDistance.current = 0;
-    setDragY(0);
-    if (dismissed) onClose();
-  }, [onClose]);
+function useModalDialog(open, onClose, ref) {
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "Escape") {
@@ -6619,9 +6780,9 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         return;
       }
       if (e.key !== "Tab") return;
-      const sheet2 = sheetRef.current;
-      if (!sheet2) return;
-      const focusables = Array.from(sheet2.querySelectorAll(FOCUSABLE)).filter(
+      const dialog = ref.current;
+      if (!dialog) return;
+      const focusables = Array.from(dialog.querySelectorAll(FOCUSABLE)).filter(
         (el) => el.offsetParent !== null || el === document.activeElement
       );
       if (focusables.length === 0) {
@@ -6638,31 +6799,77 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
         first.focus();
       }
     },
-    [onClose]
+    [onClose, ref]
   );
   useEffect(() => {
     if (!open) return;
-    previouslyFocused.current = document.activeElement;
+    const previouslyFocused = document.activeElement;
     document.addEventListener("keydown", handleKeyDown);
-    const sheet2 = sheetRef.current;
-    const first = sheet2?.querySelector(FOCUSABLE);
-    first?.focus();
+    ref.current?.querySelector(FOCUSABLE)?.focus();
     const { overflow } = document.body.style;
     document.body.style.overflow = "hidden";
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = overflow;
-      previouslyFocused.current?.focus?.();
+      previouslyFocused?.focus?.();
     };
-  }, [open, handleKeyDown]);
+  }, [open, handleKeyDown, ref]);
+}
+const overlay$2 = "_overlay_s4eai_1";
+const scrim$4 = "_scrim_s4eai_10";
+const sheet$2 = "_sheet_s4eai_16";
+const grabArea = "_grabArea_s4eai_41";
+const grabber$1 = "_grabber_s4eai_51";
+const header$5 = "_header_s4eai_59";
+const title$b = "_title_s4eai_67";
+const close$2 = "_close_s4eai_71";
+const body$3 = "_body_s4eai_84";
+const footer = "_footer_s4eai_90";
+const styles$o = {
+  overlay: overlay$2,
+  scrim: scrim$4,
+  sheet: sheet$2,
+  grabArea,
+  grabber: grabber$1,
+  header: header$5,
+  title: title$b,
+  close: close$2,
+  body: body$3,
+  footer
+};
+const DISMISS_THRESHOLD_PX = 96;
+function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }) {
+  const sheetRef = useRef(null);
+  const dragStartY = useRef(null);
+  const dragDistance = useRef(0);
+  const [dragY, setDragY] = useState(0);
+  const titleId = "bottomsheet-title";
+  const onDragStart = useCallback((clientY) => {
+    dragStartY.current = clientY;
+  }, []);
+  const onDragMove = useCallback((clientY) => {
+    if (dragStartY.current === null) return;
+    const distance = Math.max(0, clientY - dragStartY.current);
+    dragDistance.current = distance;
+    setDragY(distance);
+  }, []);
+  const onDragEnd = useCallback(() => {
+    if (dragStartY.current === null) return;
+    dragStartY.current = null;
+    const dismissed = dragDistance.current > DISMISS_THRESHOLD_PX;
+    dragDistance.current = 0;
+    setDragY(0);
+    if (dismissed) onClose();
+  }, [onClose]);
+  useModalDialog(open, onClose, sheetRef);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs("div", { className: styles$n.overlay, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$n.scrim, onClick: onClose, "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$o.overlay, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$o.scrim, onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs(
       ShopSurface,
       {
         tone: "light",
-        className: styles$n.sheet,
+        className: styles$o.sheet,
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": titleId,
@@ -6672,7 +6879,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$n.grabArea,
+              className: styles$o.grabArea,
               onPointerDown: (e) => {
                 e.currentTarget.setPointerCapture(e.pointerId);
                 onDragStart(e.clientY);
@@ -6680,12 +6887,12 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
               onPointerMove: (e) => onDragMove(e.clientY),
               onPointerUp: onDragEnd,
               onPointerCancel: onDragEnd,
-              children: /* @__PURE__ */ jsx("div", { className: styles$n.grabber, "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx("div", { className: styles$o.grabber, "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: styles$n.header, children: [
-            /* @__PURE__ */ jsx("h2", { id: titleId, className: styles$n.title, children: title2 }),
-            /* @__PURE__ */ jsx("button", { type: "button", className: styles$n.close, onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: styles$o.header, children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: styles$o.title, children: title2 }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: styles$o.close, onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
               "path",
               {
                 d: "M6 6l12 12M18 6L6 18",
@@ -6695,8 +6902,8 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles$n.body, children }),
-          footer2 && /* @__PURE__ */ jsx("div", { className: styles$n.footer, children: footer2 })
+          /* @__PURE__ */ jsx("div", { className: styles$o.body, children }),
+          footer2 && /* @__PURE__ */ jsx("div", { className: styles$o.footer, children: footer2 })
         ]
       }
     )
@@ -6707,7 +6914,7 @@ const stepper = "_stepper_1rmip_10";
 const cap = "_cap_1rmip_23";
 const button = "_button_1rmip_31";
 const value$1 = "_value_1rmip_50";
-const styles$m = {
+const styles$n = {
   wrap: wrap$1,
   stepper,
   cap,
@@ -6765,25 +6972,25 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2 }) {
   function increment() {
     if (!atMax) onChange(qty + 1);
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$m.wrap, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$m.stepper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$n.wrap, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$n.stepper, children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: styles$m.button,
+          className: styles$n.button,
           onClick: decrement,
           disabled: disabled2,
           "aria-label": willDelete ? "Remove item" : "Decrease quantity",
           children: willDelete ? /* @__PURE__ */ jsx(TrashIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$m.value, "aria-live": "polite", "aria-label": `Quantity ${qty}`, children: qty }),
+      /* @__PURE__ */ jsx("span", { className: styles$n.value, "aria-live": "polite", "aria-label": `Quantity ${qty}`, children: qty }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: styles$m.button,
+          className: styles$n.button,
           onClick: increment,
           disabled: disabled2 || atMax,
           "aria-label": "Increase quantity",
@@ -6792,10 +6999,10 @@ function QtyStepper({ qty, max, onChange, onRemove, disabled: disabled2 }) {
         }
       )
     ] }),
-    atMax && /* @__PURE__ */ jsx("span", { id: capId, className: styles$m.cap, role: "status", children: max === 0 ? "Out of stock" : `Only ${max} left` })
+    atMax && /* @__PURE__ */ jsx("span", { id: capId, className: styles$n.cap, role: "status", children: max === 0 ? "Out of stock" : `Only ${max} left` })
   ] });
 }
-const row$4 = "_row_1xbbn_1";
+const row$5 = "_row_1xbbn_1";
 const pending = "_pending_1xbbn_7";
 const media$1 = "_media_1xbbn_11";
 const image$5 = "_image_1xbbn_21";
@@ -6805,14 +7012,14 @@ const oos$1 = "_oos_1xbbn_45";
 const info$1 = "_info_1xbbn_58";
 const head = "_head_1xbbn_66";
 const meta = "_meta_1xbbn_73";
-const title$9 = "_title_1xbbn_80";
+const title$a = "_title_1xbbn_80";
 const details = "_details_1xbbn_92";
 const detail = "_detail_1xbbn_92";
 const price = "_price_1xbbn_106";
 const amount = "_amount_1xbbn_114";
 const was = "_was_1xbbn_120";
-const styles$l = {
-  row: row$4,
+const styles$m = {
+  row: row$5,
   pending,
   media: media$1,
   image: image$5,
@@ -6822,7 +7029,7 @@ const styles$l = {
   info: info$1,
   head,
   meta,
-  title: title$9,
+  title: title$a,
   details,
   detail,
   price,
@@ -6845,24 +7052,24 @@ function CartLineItem({
   const displayImage = image2 ?? item2.image;
   const pairs = variantPairs(item2.attributes);
   const soldOut = item2.available === 0;
-  return /* @__PURE__ */ jsxs("div", { className: [styles$l.row, pending2 ? styles$l.pending : ""].join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$l.media, children: [
-      displayImage ? /* @__PURE__ */ jsx(ShopImage, { src: displayImage, alt: "", fill: true, sizes: "100px", className: styles$l.image }) : /* @__PURE__ */ jsx("div", { className: styles$l.placeholder, "aria-hidden": "true" }),
-      soldOut ? /* @__PURE__ */ jsx("span", { className: styles$l.oos, children: "Out of stock" }) : discountPct2 !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$l.saleBadge, children: /* @__PURE__ */ jsx(SaleBadge, { pct: discountPct2 }) })
+  return /* @__PURE__ */ jsxs("div", { className: [styles$m.row, pending2 ? styles$m.pending : ""].join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$m.media, children: [
+      displayImage ? /* @__PURE__ */ jsx(ShopImage, { src: displayImage, alt: "", fill: true, sizes: "100px", className: styles$m.image }) : /* @__PURE__ */ jsx("div", { className: styles$m.placeholder, "aria-hidden": "true" }),
+      soldOut ? /* @__PURE__ */ jsx("span", { className: styles$m.oos, children: "Out of stock" }) : discountPct2 !== void 0 && /* @__PURE__ */ jsx("span", { className: styles$m.saleBadge, children: /* @__PURE__ */ jsx(SaleBadge, { pct: discountPct2 }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: styles$l.info, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$l.head, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$l.meta, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$l.title, children: displayTitle }),
-          pairs.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$l.details, children: pairs.map(({ key, label: label2, value: value2 }) => /* @__PURE__ */ jsxs("span", { className: styles$l.detail, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$m.info, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$m.head, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$m.meta, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$m.title, children: displayTitle }),
+          pairs.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$m.details, children: pairs.map(({ key, label: label2, value: value2 }) => /* @__PURE__ */ jsxs("span", { className: styles$m.detail, children: [
             label2,
             ": ",
             value2
           ] }, key)) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$l.price, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$l.amount, children: format(item2.line_total) }),
-          compareAt2 && /* @__PURE__ */ jsx("span", { className: styles$l.was, children: format(compareAt2) })
+        /* @__PURE__ */ jsxs("div", { className: styles$m.price, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$m.amount, children: format(item2.line_total) }),
+          compareAt2 && /* @__PURE__ */ jsx("span", { className: styles$m.was, children: format(compareAt2) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -6879,21 +7086,21 @@ function CartLineItem({
   ] });
 }
 const box$1 = "_box_1cf1a_1";
-const row$3 = "_row_1cf1a_10";
-const icon$1 = "_icon_1cf1a_16";
+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$k = {
+const styles$l = {
   box: box$1,
-  row: row$3,
-  icon: icon$1,
+  row: row$4,
+  icon: icon$2,
   label,
   divider: divider$1
 };
 function ShippingInfo() {
-  return /* @__PURE__ */ jsxs("section", { className: styles$k.box, "aria-label": "Shipping and returns", children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$k.row, children: [
-      /* @__PURE__ */ jsxs("svg", { className: styles$k.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs("section", { className: styles$l.box, "aria-label": "Shipping and returns", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$l.row, children: [
+      /* @__PURE__ */ jsxs("svg", { className: styles$l.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx(
           "path",
           {
@@ -6906,11 +7113,11 @@ function ShippingInfo() {
         /* @__PURE__ */ jsx("circle", { cx: "7", cy: "17", r: "1.6", stroke: "currentColor", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "17", r: "1.6", stroke: "currentColor", strokeWidth: "1.5" })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: styles$k.label, children: "Standard or express delivery" })
+      /* @__PURE__ */ jsx("p", { className: styles$l.label, children: "Standard or express delivery" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles$k.divider, role: "presentation" }),
-    /* @__PURE__ */ jsxs("div", { className: styles$k.row, children: [
-      /* @__PURE__ */ jsxs("svg", { className: styles$k.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: styles$l.divider, role: "presentation" }),
+    /* @__PURE__ */ jsxs("div", { className: styles$l.row, children: [
+      /* @__PURE__ */ jsxs("svg", { className: styles$l.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx(
           "path",
           {
@@ -6932,7 +7139,7 @@ function ShippingInfo() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("p", { className: styles$k.label, children: "30 days returns" })
+      /* @__PURE__ */ jsx("p", { className: styles$l.label, children: "30 days returns" })
     ] })
   ] });
 }
@@ -6941,7 +7148,7 @@ const floating$1 = "_floating_1aly7_16";
 const divider = "_divider_1aly7_22";
 const info = "_info_1aly7_26";
 const actions = "_actions_1aly7_33";
-const styles$j = {
+const styles$k = {
   bar,
   floating: floating$1,
   divider,
@@ -6949,9 +7156,9 @@ const styles$j = {
   actions
 };
 function StickyCtaBar({ children, info: info2, variant = "floating" }) {
-  return /* @__PURE__ */ jsxs("div", { className: [styles$j.bar, styles$j[variant]].join(" "), children: [
-    info2 && /* @__PURE__ */ jsx("div", { className: styles$j.info, children: info2 }),
-    /* @__PURE__ */ jsx("div", { className: styles$j.actions, children })
+  return /* @__PURE__ */ jsxs("div", { className: [styles$k.bar, styles$k[variant]].join(" "), children: [
+    info2 && /* @__PURE__ */ jsx("div", { className: styles$k.info, children: info2 }),
+    /* @__PURE__ */ jsx("div", { className: styles$k.actions, children })
   ] });
 }
 const surface = "_surface_1wfue_15";
@@ -6962,7 +7169,7 @@ const sectionHeader = "_sectionHeader_1wfue_40";
 const sectionTitle = "_sectionTitle_1wfue_46";
 const count = "_count_1wfue_53";
 const lines = "_lines_1wfue_73";
-const styles$i = {
+const styles$j = {
   surface,
   screen,
   body: body$2,
@@ -6973,7 +7180,7 @@ const styles$i = {
   lines
 };
 function CartView(props = {}) {
-  return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$i.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
+  return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
   onContinueShopping,
@@ -7112,14 +7319,14 @@ function CartViewContent({
   }
   const locked = cart2.locked !== void 0;
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
-  return /* @__PURE__ */ jsxs("div", { className: styles$i.screen, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$i.body, children: [
-      /* @__PURE__ */ jsxs("section", { className: styles$i.items, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$i.sectionHeader, children: [
-          /* @__PURE__ */ jsx("h2", { className: styles$i.sectionTitle, children: "Items" }),
-          /* @__PURE__ */ jsx("span", { className: styles$i.count, children: itemCount })
+  return /* @__PURE__ */ jsxs("div", { className: styles$j.screen, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$j.body, children: [
+      /* @__PURE__ */ jsxs("section", { className: styles$j.items, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$j.sectionHeader, children: [
+          /* @__PURE__ */ jsx("h2", { className: styles$j.sectionTitle, children: "Items" }),
+          /* @__PURE__ */ jsx("span", { className: styles$j.count, children: itemCount })
         ] }),
-        /* @__PURE__ */ jsx("ul", { className: styles$i.lines, children: cart2.items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("ul", { className: styles$j.lines, children: cart2.items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
           CartLineItem,
           {
             item: item2,
@@ -7167,7 +7374,7 @@ const share = "_share_h8m00_37";
 const dots$2 = "_dots_h8m00_54";
 const dot$2 = "_dot_h8m00_54";
 const dotActive$2 = "_dotActive_h8m00_78";
-const styles$h = {
+const styles$i = {
   gallery,
   track: track$2,
   slide: slide$1,
@@ -7205,7 +7412,7 @@ function MediaGallery({ media: media2, alt }) {
     setActive(index);
   }
   if (media2.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: styles$h.placeholder, "aria-hidden": "true" });
+    return /* @__PURE__ */ jsx("div", { className: styles$i.placeholder, "aria-hidden": "true" });
   }
   function share2() {
     if (typeof navigator !== "undefined" && navigator.share) {
@@ -7213,8 +7420,8 @@ function MediaGallery({ media: media2, alt }) {
       });
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$h.gallery, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: styles$h.share, onClick: share2, "aria-label": "Share", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: styles$i.gallery, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: styles$i.share, onClick: share2, "aria-label": "Share", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
       "path",
       {
         d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
@@ -7224,47 +7431,47 @@ function MediaGallery({ media: media2, alt }) {
         strokeLinejoin: "round"
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: styles$h.track, ref: trackRef, role: "group", "aria-label": `${alt} images`, children: media2.map((src, i) => /* @__PURE__ */ jsx("div", { className: styles$h.slide, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$i.track, ref: trackRef, role: "group", "aria-label": `${alt} images`, children: media2.map((src, i) => /* @__PURE__ */ jsx("div", { className: styles$i.slide, children: /* @__PURE__ */ jsx(
       ShopImage,
       {
         src,
         alt: `${alt} — image ${i + 1} of ${media2.length}`,
         fill: true,
         sizes: "(max-width: 480px) 100vw, 480px",
-        className: styles$h.image,
+        className: styles$i.image,
         priority: i === 0
       }
     ) }, src)) }),
-    media2.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$h.dots, role: "tablist", "aria-label": "Gallery pagination", children: media2.map((src, i) => /* @__PURE__ */ jsx(
+    media2.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$i.dots, role: "tablist", "aria-label": "Gallery pagination", children: media2.map((src, i) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         role: "tab",
         "aria-selected": i === active,
         "aria-label": `Go to image ${i + 1}`,
-        className: [styles$h.dot, i === active ? styles$h.dotActive : ""].join(" "),
+        className: [styles$i.dot, i === active ? styles$i.dotActive : ""].join(" "),
         onClick: () => goTo(i)
       },
       src
     )) })
   ] });
 }
-const scrim$2 = "_scrim_8wz6r_6";
-const sheet = "_sheet_8wz6r_17";
+const scrim$3 = "_scrim_8wz6r_6";
+const sheet$1 = "_sheet_8wz6r_17";
 const grabber = "_grabber_8wz6r_29";
-const header$3 = "_header_8wz6r_37";
-const title$8 = "_title_8wz6r_45";
-const close = "_close_8wz6r_51";
+const header$4 = "_header_8wz6r_37";
+const title$9 = "_title_8wz6r_45";
+const close$1 = "_close_8wz6r_51";
 const tableWrap = "_tableWrap_8wz6r_71";
 const table = "_table_8wz6r_71";
 const notes = "_notes_8wz6r_95";
-const styles$g = {
-  scrim: scrim$2,
-  sheet,
+const styles$h = {
+  scrim: scrim$3,
+  sheet: sheet$1,
   grabber,
-  header: header$3,
-  title: title$8,
-  close,
+  header: header$4,
+  title: title$9,
+  close: close$1,
   tableWrap,
   table,
   notes
@@ -7283,24 +7490,24 @@ function SizeGuideSheet({ guide, onClose }) {
   const rows = guide.rows ?? [];
   const notes2 = guide.notes ?? [];
   const hasTable = columns.length > 0 && rows.length > 0;
-  return /* @__PURE__ */ jsx("div", { className: styles$g.scrim, onClick: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: styles$h.scrim, onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$g.sheet,
+      className: styles$h.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "size-guide-title",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$g.grabber, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("div", { className: styles$g.header, children: [
-          /* @__PURE__ */ jsx("h2", { id: "size-guide-title", className: styles$g.title, children: guide.title }),
+        /* @__PURE__ */ jsx("div", { className: styles$h.grabber, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: styles$h.header, children: [
+          /* @__PURE__ */ jsx("h2", { id: "size-guide-title", className: styles$h.title, children: guide.title }),
           /* @__PURE__ */ jsx(
             "button",
             {
               ref: closeRef,
               type: "button",
-              className: styles$g.close,
+              className: styles$h.close,
               onClick: onClose,
               "aria-label": "Close size guide",
               children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
@@ -7315,38 +7522,38 @@ function SizeGuideSheet({ guide, onClose }) {
             }
           )
         ] }),
-        hasTable && /* @__PURE__ */ jsx("div", { className: styles$g.tableWrap, children: /* @__PURE__ */ jsxs("table", { className: styles$g.table, children: [
+        hasTable && /* @__PURE__ */ jsx("div", { className: styles$h.tableWrap, children: /* @__PURE__ */ jsxs("table", { className: styles$h.table, children: [
           /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx("th", { scope: "col", children: c }, c)) }) }),
           /* @__PURE__ */ jsx("tbody", { children: rows.map((row2) => /* @__PURE__ */ jsx("tr", { children: row2.map(
             (cell, i) => i === 0 ? /* @__PURE__ */ jsx("th", { scope: "row", children: cell }, cell) : /* @__PURE__ */ jsx("td", { children: cell }, `${cell}-${i}`)
           ) }, row2.join("|"))) })
         ] }) }),
-        notes2.length > 0 && /* @__PURE__ */ jsx("ul", { className: styles$g.notes, children: notes2.map((n) => /* @__PURE__ */ jsx("li", { children: n }, n)) })
+        notes2.length > 0 && /* @__PURE__ */ jsx("ul", { className: styles$h.notes, children: notes2.map((n) => /* @__PURE__ */ jsx("li", { children: n }, n)) })
       ]
     }
   ) });
 }
 const root$2 = "_root_9zj90_1";
-const header$2 = "_header_9zj90_7";
-const title$7 = "_title_9zj90_12";
+const header$3 = "_header_9zj90_7";
+const title$8 = "_title_9zj90_12";
 const chips = "_chips_9zj90_20";
 const chip = "_chip_9zj90_20";
 const selected$2 = "_selected_9zj90_44";
 const disabled$1 = "_disabled_9zj90_56";
 const error = "_error_9zj90_64";
 const sizeGuide = "_sizeGuide_9zj90_71";
-const chevron$1 = "_chevron_9zj90_85";
-const styles$f = {
+const chevron$2 = "_chevron_9zj90_85";
+const styles$g = {
   root: root$2,
-  header: header$2,
-  title: title$7,
+  header: header$3,
+  title: title$8,
   chips,
   chip,
   selected: selected$2,
   disabled: disabled$1,
   error,
   sizeGuide,
-  chevron: chevron$1
+  chevron: chevron$2
 };
 function SizeSelector({
   sizes,
@@ -7356,9 +7563,9 @@ function SizeSelector({
   guide
 }) {
   const [guideOpen, setGuideOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { className: styles$f.root, "aria-labelledby": "size-heading", children: [
-    /* @__PURE__ */ jsx("div", { className: styles$f.header, children: /* @__PURE__ */ jsx("h2", { id: "size-heading", className: styles$f.title, children: "Size" }) }),
-    /* @__PURE__ */ jsx("div", { className: styles$f.chips, role: "radiogroup", "aria-label": "Size", "aria-required": "true", children: sizes.map((size) => {
+  return /* @__PURE__ */ jsxs("section", { className: styles$g.root, "aria-labelledby": "size-heading", children: [
+    /* @__PURE__ */ jsx("div", { className: styles$g.header, children: /* @__PURE__ */ jsx("h2", { id: "size-heading", className: styles$g.title, children: "Size" }) }),
+    /* @__PURE__ */ jsx("div", { className: styles$g.chips, role: "radiogroup", "aria-label": "Size", "aria-required": "true", children: sizes.map((size) => {
       const isSelected = size.value === selected2;
       const disabled2 = !size.available;
       return /* @__PURE__ */ jsxs(
@@ -7369,7 +7576,7 @@ function SizeSelector({
           "aria-checked": isSelected,
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
-          className: [styles$f.chip, isSelected ? styles$f.selected : "", disabled2 ? styles$f.disabled : ""].filter(Boolean).join(" "),
+          className: [styles$g.chip, isSelected ? styles$g.selected : "", disabled2 ? styles$g.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(size.value),
           children: [
             size.value,
@@ -7379,12 +7586,12 @@ function SizeSelector({
         size.value
       );
     }) }),
-    error2 && /* @__PURE__ */ jsx("p", { className: styles$f.error, role: "alert", children: "Please select a size" }),
+    error2 && /* @__PURE__ */ jsx("p", { className: styles$g.error, role: "alert", children: "Please select a size" }),
     guide && /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: styles$f.sizeGuide,
+        className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
@@ -7393,7 +7600,7 @@ function SizeSelector({
           /* @__PURE__ */ jsx(
             "svg",
             {
-              className: styles$f.chevron,
+              className: styles$g.chevron,
               width: "12",
               height: "12",
               viewBox: "0 0 12 12",
@@ -7418,8 +7625,8 @@ function SizeSelector({
   ] });
 }
 const root$1 = "_root_1j4n8_1";
-const header$1 = "_header_1j4n8_7";
-const title$6 = "_title_1j4n8_14";
+const header$2 = "_header_1j4n8_7";
+const title$7 = "_title_1j4n8_14";
 const value = "_value_1j4n8_19";
 const tiles = "_tiles_1j4n8_24";
 const tile = "_tile_1j4n8_24";
@@ -7427,12 +7634,12 @@ const selected$1 = "_selected_1j4n8_48";
 const media = "_media_1j4n8_32";
 const image$3 = "_image_1j4n8_60";
 const placeholder = "_placeholder_1j4n8_64";
-const scrim$1 = "_scrim_1j4n8_72";
+const scrim$2 = "_scrim_1j4n8_72";
 const stockBadge = "_stockBadge_1j4n8_91";
-const styles$e = {
+const styles$f = {
   root: root$1,
-  header: header$1,
-  title: title$6,
+  header: header$2,
+  title: title$7,
   value,
   tiles,
   tile,
@@ -7440,17 +7647,17 @@ const styles$e = {
   media,
   image: image$3,
   placeholder,
-  scrim: scrim$1,
+  scrim: scrim$2,
   stockBadge
 };
 function ColorSelector({ colours, selected: selected2, onSelect }) {
-  return /* @__PURE__ */ jsxs("section", { className: styles$e.root, "aria-labelledby": "colour-heading", children: [
-    /* @__PURE__ */ jsxs("p", { className: styles$e.header, children: [
-      /* @__PURE__ */ jsx("span", { id: "colour-heading", className: styles$e.title, children: "Color:" }),
+  return /* @__PURE__ */ jsxs("section", { className: styles$f.root, "aria-labelledby": "colour-heading", children: [
+    /* @__PURE__ */ jsxs("p", { className: styles$f.header, children: [
+      /* @__PURE__ */ jsx("span", { id: "colour-heading", className: styles$f.title, children: "Color:" }),
       " ",
-      /* @__PURE__ */ jsx("span", { className: styles$e.value, children: selected2 ?? "Select" })
+      /* @__PURE__ */ jsx("span", { className: styles$f.value, children: selected2 ?? "Select" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles$e.tiles, role: "radiogroup", "aria-label": "Color", "aria-required": "true", children: colours.map((c) => {
+    /* @__PURE__ */ jsx("div", { className: styles$f.tiles, role: "radiogroup", "aria-label": "Color", "aria-required": "true", children: colours.map((c) => {
       const isSelected = c.value === selected2;
       const soldOut = !c.available;
       const lowStock = !soldOut && c.remaining !== void 0 && c.remaining > 0 && c.remaining <= 5;
@@ -7461,14 +7668,14 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           role: "radio",
           "aria-checked": isSelected,
           "aria-label": `${c.value}${soldOut ? " (out of stock)" : ""}`,
-          className: [styles$e.tile, isSelected ? styles$e.selected : ""].filter(Boolean).join(" "),
+          className: [styles$f.tile, isSelected ? styles$f.selected : ""].filter(Boolean).join(" "),
           onClick: () => onSelect(c.value),
           children: [
-            /* @__PURE__ */ jsxs("span", { className: styles$e.media, children: [
-              c.image ? /* @__PURE__ */ jsx(ShopImage, { src: c.image, alt: "", fill: true, sizes: "79px", className: styles$e.image }) : /* @__PURE__ */ jsx("span", { className: styles$e.placeholder, "aria-hidden": "true" }),
-              soldOut && /* @__PURE__ */ jsx("span", { className: styles$e.scrim, "aria-hidden": "true", children: "Out of stock" })
+            /* @__PURE__ */ jsxs("span", { className: styles$f.media, children: [
+              c.image ? /* @__PURE__ */ jsx(ShopImage, { src: c.image, alt: "", fill: true, sizes: "79px", className: styles$f.image }) : /* @__PURE__ */ jsx("span", { className: styles$f.placeholder, "aria-hidden": "true" }),
+              soldOut && /* @__PURE__ */ jsx("span", { className: styles$f.scrim, "aria-hidden": "true", children: "Out of stock" })
             ] }),
-            lowStock && /* @__PURE__ */ jsxs("span", { className: styles$e.stockBadge, "aria-hidden": "true", children: [
+            lowStock && /* @__PURE__ */ jsxs("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: [
               c.remaining,
               " left"
             ] })
@@ -7485,7 +7692,7 @@ const options = "_options_1mnz1_16";
 const option = "_option_1mnz1_16";
 const selected = "_selected_1mnz1_36";
 const disabled = "_disabled_1mnz1_42";
-const styles$d = {
+const styles$e = {
   fieldset,
   legend,
   options,
@@ -7506,9 +7713,9 @@ function VariantSelector({
     const values = Object.values(variant.attributes);
     return values.length > 0 ? values.join(" · ") : variant.sku;
   }
-  return /* @__PURE__ */ jsxs("fieldset", { className: styles$d.fieldset, children: [
-    /* @__PURE__ */ jsx("legend", { className: styles$d.legend, children: "Select an option" }),
-    /* @__PURE__ */ jsx("div", { className: styles$d.options, role: "radiogroup", "aria-label": "Variant", children: variants.map((variant) => {
+  return /* @__PURE__ */ jsxs("fieldset", { className: styles$e.fieldset, children: [
+    /* @__PURE__ */ jsx("legend", { className: styles$e.legend, children: "Select an option" }),
+    /* @__PURE__ */ jsx("div", { className: styles$e.options, role: "radiogroup", "aria-label": "Variant", children: variants.map((variant) => {
       const selected2 = variant.sku === selectedSku;
       const disabled2 = !variant.in_stock;
       return /* @__PURE__ */ jsxs(
@@ -7520,9 +7727,9 @@ function VariantSelector({
           "aria-disabled": disabled2 || void 0,
           disabled: disabled2,
           className: [
-            styles$d.option,
-            selected2 ? styles$d.selected : "",
-            disabled2 ? styles$d.disabled : ""
+            styles$e.option,
+            selected2 ? styles$e.selected : "",
+            disabled2 ? styles$e.disabled : ""
           ].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
           children: [
@@ -7537,15 +7744,15 @@ function VariantSelector({
 }
 const root = "_root_t4qba_2";
 const group = "_group_t4qba_8";
-const title$5 = "_title_t4qba_14";
+const title$6 = "_title_t4qba_14";
 const body$1 = "_body_t4qba_22";
 const paragraph = "_paragraph_t4qba_26";
 const clamped = "_clamped_t4qba_46";
 const toggle = "_toggle_t4qba_51";
-const styles$c = {
+const styles$d = {
   root,
   group,
-  title: title$5,
+  title: title$6,
   body: body$1,
   paragraph,
   clamped,
@@ -7558,16 +7765,16 @@ function ProductDetails({ description: description2 }) {
   const [expanded, setExpanded] = useState(false);
   const paragraphs = paragraphsOf(description2);
   if (paragraphs.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { className: styles$c.root, "aria-labelledby": "details-heading", children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$c.group, children: [
-      /* @__PURE__ */ jsx("h2", { id: "details-heading", className: styles$c.title, children: "Product details" }),
-      /* @__PURE__ */ jsx("div", { className: [styles$c.body, expanded ? "" : styles$c.clamped].join(" "), children: paragraphs.map((p) => /* @__PURE__ */ jsx("p", { className: styles$c.paragraph, children: p }, p)) })
+  return /* @__PURE__ */ jsxs("section", { className: styles$d.root, "aria-labelledby": "details-heading", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$d.group, children: [
+      /* @__PURE__ */ jsx("h2", { id: "details-heading", className: styles$d.title, children: "Product details" }),
+      /* @__PURE__ */ jsx("div", { className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "), children: paragraphs.map((p) => /* @__PURE__ */ jsx("p", { className: styles$d.paragraph, children: p }, p)) })
     ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: styles$c.toggle,
+        className: styles$d.toggle,
         "aria-expanded": expanded,
         onClick: () => setExpanded((v) => !v),
         children: expanded ? "Less" : "more"
@@ -7575,25 +7782,25 @@ function ProductDetails({ description: description2 }) {
     )
   ] });
 }
-const row$2 = "_row_l4edh_1";
+const row$3 = "_row_l4edh_1";
 const badge$1 = "_badge_l4edh_11";
-const styles$b = {
-  row: row$2,
+const styles$c = {
+  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 /* @__PURE__ */ jsx("ul", { className: styles$b.row, children: flags.map((flag) => /* @__PURE__ */ jsx("li", { className: styles$b.badge, children: flag }, flag)) });
+  return /* @__PURE__ */ jsx("ul", { className: styles$c.row, children: flags.map((flag) => /* @__PURE__ */ jsx("li", { className: styles$c.badge, children: flag }, flag)) });
 }
 const banner = "_banner_1xvw4_2";
 const message = "_message_1xvw4_14";
-const icon = "_icon_1xvw4_22";
+const icon$1 = "_icon_1xvw4_22";
 const timer = "_timer_1xvw4_27";
-const styles$a = {
+const styles$b = {
   banner,
   message,
-  icon,
+  icon: icon$1,
   timer
 };
 function formatRemaining(ms) {
@@ -7613,15 +7820,15 @@ function PromoBanner({ promo: promo2 }) {
   }, [promo2.ends_at]);
   const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
-  return /* @__PURE__ */ jsxs("div", { className: styles$a.banner, children: [
-    /* @__PURE__ */ jsxs("span", { className: styles$a.message, children: [
-      /* @__PURE__ */ jsxs("svg", { className: styles$a.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.banner, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles$b.message, children: [
+      /* @__PURE__ */ jsxs("svg", { className: styles$b.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("rect", { x: "3", y: "8", width: "18", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }),
         /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 8v12M12 8S10.5 4 8.5 4 6 6 8 6.5 12 8 12 8Zm0 0s1.5-4 3.5-4 2.5 2 .5 2.5S12 8 12 8Z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" })
       ] }),
       promo2.message
     ] }),
-    showTimer && /* @__PURE__ */ jsxs("span", { className: styles$a.timer, children: [
+    showTimer && /* @__PURE__ */ jsxs("span", { className: styles$b.timer, children: [
       /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "1.6" }),
         /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -7635,17 +7842,17 @@ const content = "_content_1hv16_14";
 const intro = "_intro_1hv16_21";
 const productInfo = "_productInfo_1hv16_28";
 const titlePrice = "_titlePrice_1hv16_34";
-const title$4 = "_title_1hv16_34";
+const title$5 = "_title_1hv16_34";
 const availability = "_availability_1hv16_55";
 const low = "_low_1hv16_62";
 const oos = "_oos_1hv16_66";
-const styles$9 = {
+const styles$a = {
   page,
   content,
   intro,
   productInfo,
   titlePrice,
-  title: title$4,
+  title: title$5,
   availability,
   low,
   oos
@@ -7788,14 +7995,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const lowStock = available > 0 && available <= 5;
   const stockNotice = !purchasable || lowStock;
   const availabilityLabel = !purchasable ? "Out of stock" : lowStock ? `Only ${available} left` : "";
-  return /* @__PURE__ */ jsxs(ShopSurface, { tone: "light", fill: true, className: styles$9.page, children: [
+  return /* @__PURE__ */ jsxs(ShopSurface, { tone: "light", fill: true, className: styles$a.page, children: [
     /* @__PURE__ */ jsx(MediaGallery, { media: media2, alt: product.title }),
-    /* @__PURE__ */ jsxs("div", { className: styles$9.content, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$9.intro, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$a.content, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$a.intro, children: [
         /* @__PURE__ */ jsx(PdpBadges, { badges: product.badges ?? [] }),
-        /* @__PURE__ */ jsxs("div", { className: styles$9.productInfo, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles$9.titlePrice, children: [
-            /* @__PURE__ */ jsx("h1", { className: styles$9.title, children: product.title }),
+        /* @__PURE__ */ jsxs("div", { className: styles$a.productInfo, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$a.titlePrice, children: [
+            /* @__PURE__ */ jsx("h1", { className: styles$a.title, children: product.title }),
             /* @__PURE__ */ jsx(
               PriceBlock,
               {
@@ -7813,7 +8020,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       stockNotice && /* @__PURE__ */ jsx(
         "p",
         {
-          className: [styles$9.availability, anyInStock ? styles$9.low : styles$9.oos].join(" "),
+          className: [styles$a.availability, anyInStock ? styles$a.low : styles$a.oos].join(" "),
           role: "status",
           children: availabilityLabel
         }
@@ -7871,24 +8078,24 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
 }
 const hero$1 = "_hero_2mcnp_10";
 const image$2 = "_image_2mcnp_37";
-const scrim = "_scrim_2mcnp_51";
-const text$1 = "_text_2mcnp_57";
-const title$3 = "_title_2mcnp_72";
-const subtitle$1 = "_subtitle_2mcnp_81";
+const scrim$1 = "_scrim_2mcnp_51";
+const text$2 = "_text_2mcnp_57";
+const title$4 = "_title_2mcnp_72";
+const subtitle$2 = "_subtitle_2mcnp_81";
 const noImage = "_noImage_2mcnp_94";
-const styles$8 = {
+const styles$9 = {
   hero: hero$1,
   image: image$2,
-  scrim,
-  text: text$1,
-  title: title$3,
-  subtitle: subtitle$1,
+  scrim: scrim$1,
+  text: text$2,
+  title: title$4,
+  subtitle: subtitle$2,
   noImage
 };
 function PcpHero({ hero: hero2 }) {
-  return /* @__PURE__ */ jsxs("section", { className: [styles$8.hero, hero2.image ? "" : styles$8.noImage].join(" "), children: [
+  return /* @__PURE__ */ jsxs("section", { className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "), children: [
     hero2.image && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: styles$8.image, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: styles$9.image, children: /* @__PURE__ */ jsx(
         ShopImage,
         {
           src: hero2.image,
@@ -7898,24 +8105,24 @@ function PcpHero({ hero: hero2 }) {
           priority: true
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: styles$8.scrim, "aria-hidden": "true" })
+      /* @__PURE__ */ jsx("div", { className: styles$9.scrim, "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: styles$8.text, children: [
-      /* @__PURE__ */ jsx("h1", { className: styles$8.title, children: hero2.title }),
-      hero2.subtitle && /* @__PURE__ */ jsx("p", { className: styles$8.subtitle, children: hero2.subtitle })
+    /* @__PURE__ */ jsxs("div", { className: styles$9.text, children: [
+      /* @__PURE__ */ jsx("h1", { className: styles$9.title, children: hero2.title }),
+      hero2.subtitle && /* @__PURE__ */ jsx("p", { className: styles$9.subtitle, children: hero2.subtitle })
     ] })
   ] });
 }
-const text = "_text_1saw4_6";
+const text$1 = "_text_1saw4_6";
 const center = "_center_1saw4_18";
 const left = "_left_1saw4_23";
-const styles$7 = {
-  text,
+const styles$8 = {
+  text: text$1,
   center,
   left
 };
 function LifestyleText({ text: text2, align = "center" }) {
-  return /* @__PURE__ */ jsx("p", { className: [styles$7.text, align === "left" ? styles$7.left : styles$7.center].join(" "), children: text2 });
+  return /* @__PURE__ */ jsx("p", { className: [styles$8.text, align === "left" ? styles$8.left : styles$8.center].join(" "), children: text2 });
 }
 const wrap = "_wrap_9mquf_1";
 const box = "_box_9mquf_5";
@@ -7925,7 +8132,7 @@ const image$1 = "_image_9mquf_38";
 const dots$1 = "_dots_9mquf_43";
 const dot$1 = "_dot_9mquf_43";
 const dotActive$1 = "_dotActive_9mquf_63";
-const styles$6 = {
+const styles$7 = {
   wrap,
   box,
   track: track$1,
@@ -7946,22 +8153,22 @@ function LifestyleImage({ images }) {
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
   if (images.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: styles$6.wrap, children: /* @__PURE__ */ jsxs("div", { className: styles$6.box, children: [
-    /* @__PURE__ */ jsx("ul", { className: styles$6.track, ref: trackRef, children: images.map((src, i) => /* @__PURE__ */ jsx("li", { className: styles$6.slide, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$7.wrap, children: /* @__PURE__ */ jsxs("div", { className: styles$7.box, children: [
+    /* @__PURE__ */ jsx("ul", { className: styles$7.track, ref: trackRef, children: images.map((src, i) => /* @__PURE__ */ jsx("li", { className: styles$7.slide, children: /* @__PURE__ */ jsx(
       ShopImage,
       {
         src,
         alt: "",
         fill: true,
         sizes: "(max-width: 480px) 100vw, 480px",
-        className: styles$6.image,
+        className: styles$7.image,
         priority: i === 0
       }
     ) }, src)) }),
-    images.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$6.dots, "aria-hidden": "true", children: images.map((src, i) => /* @__PURE__ */ jsx(
+    images.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$7.dots, "aria-hidden": "true", children: images.map((src, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: [styles$6.dot, i === active ? styles$6.dotActive : ""].join(" ")
+        className: [styles$7.dot, i === active ? styles$7.dotActive : ""].join(" ")
       },
       src
     )) })
@@ -7976,7 +8183,7 @@ const dots = "_dots_iy175_57";
 const dot = "_dot_iy175_57";
 const dotActive = "_dotActive_iy175_70";
 const disclaimer = "_disclaimer_iy175_76";
-const styles$5 = {
+const styles$6 = {
   section: section$2,
   track,
   card,
@@ -7997,49 +8204,49 @@ function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
     track2.addEventListener("scroll", onScroll, { passive: true });
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
-  return /* @__PURE__ */ jsxs("section", { className: styles$5.section, "aria-label": "Reviews", children: [
-    /* @__PURE__ */ jsx("ul", { className: styles$5.track, ref: trackRef, children: quotes.map((q, i) => /* @__PURE__ */ jsxs("li", { className: styles$5.card, children: [
-      /* @__PURE__ */ jsxs("blockquote", { className: styles$5.quote, children: [
+  return /* @__PURE__ */ jsxs("section", { className: styles$6.section, "aria-label": "Reviews", children: [
+    /* @__PURE__ */ jsx("ul", { className: styles$6.track, ref: trackRef, children: quotes.map((q, i) => /* @__PURE__ */ jsxs("li", { className: styles$6.card, children: [
+      /* @__PURE__ */ jsxs("blockquote", { className: styles$6.quote, children: [
         "“",
         q.quote,
         "”"
       ] }),
-      /* @__PURE__ */ jsx("p", { className: styles$5.author, children: q.author })
+      /* @__PURE__ */ jsx("p", { className: styles$6.author, children: q.author })
     ] }, i)) }),
-    quotes.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$5.dots, "aria-hidden": "true", children: quotes.map((_, i) => /* @__PURE__ */ jsx("span", { className: [styles$5.dot, i === active ? styles$5.dotActive : ""].join(" ") }, i)) }),
-    disclaimer2 && /* @__PURE__ */ jsx("p", { className: styles$5.disclaimer, children: disclaimer2 })
+    quotes.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$6.dots, "aria-hidden": "true", children: quotes.map((_, i) => /* @__PURE__ */ jsx("span", { className: [styles$6.dot, i === active ? styles$6.dotActive : ""].join(" ") }, i)) }),
+    disclaimer2 && /* @__PURE__ */ jsx("p", { className: styles$6.disclaimer, children: disclaimer2 })
   ] });
 }
 const section$1 = "_section_145t0_1";
-const row$1 = "_row_145t0_9";
-const title$2 = "_title_145t0_21";
+const row$2 = "_row_145t0_9";
+const title$3 = "_title_145t0_21";
 const body = "_body_145t0_29";
-const styles$4 = {
+const styles$5 = {
   section: section$1,
-  row: row$1,
-  title: title$2,
+  row: row$2,
+  title: title$3,
   body
 };
 function WhyUs({ items: items2 }) {
-  return /* @__PURE__ */ jsx("section", { className: styles$4.section, "aria-label": "Why shop with us", children: items2.map((it, i) => /* @__PURE__ */ jsxs("div", { className: styles$4.row, children: [
-    /* @__PURE__ */ jsx("p", { className: styles$4.title, children: it.title }),
-    /* @__PURE__ */ jsx("p", { className: styles$4.body, children: it.body })
+  return /* @__PURE__ */ jsx("section", { className: styles$5.section, "aria-label": "Why shop with us", children: items2.map((it, i) => /* @__PURE__ */ jsxs("div", { className: styles$5.row, children: [
+    /* @__PURE__ */ jsx("p", { className: styles$5.title, children: it.title }),
+    /* @__PURE__ */ jsx("p", { className: styles$5.body, children: it.body })
   ] }, i)) });
 }
 const section = "_section_opjfc_1";
-const title$1 = "_title_opjfc_8";
-const list = "_list_opjfc_15";
-const row = "_row_opjfc_26";
-const styles$3 = {
+const title$2 = "_title_opjfc_8";
+const list$1 = "_list_opjfc_15";
+const row$1 = "_row_opjfc_26";
+const styles$4 = {
   section,
-  title: title$1,
-  list,
-  row
+  title: title$2,
+  list: list$1,
+  row: row$1
 };
 function ExploreList({ title: title2, links }) {
-  return /* @__PURE__ */ jsxs("section", { className: styles$3.section, "aria-label": title2, children: [
-    /* @__PURE__ */ jsx("h2", { className: styles$3.title, children: title2 }),
-    /* @__PURE__ */ jsx("ul", { className: styles$3.list, children: links.map((l) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(ShopLink, { to: `/category/${encodeURIComponent(l.code)}`, className: styles$3.row, children: [
+  return /* @__PURE__ */ jsxs("section", { className: styles$4.section, "aria-label": title2, children: [
+    /* @__PURE__ */ jsx("h2", { className: styles$4.title, children: title2 }),
+    /* @__PURE__ */ jsx("ul", { className: styles$4.list, children: links.map((l) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(ShopLink, { to: `/category/${encodeURIComponent(l.code)}`, className: styles$4.row, children: [
       /* @__PURE__ */ jsx("span", { children: l.label }),
       /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
     ] }) }, l.code)) })
@@ -8051,7 +8258,7 @@ const featured = "_featured_6gy3c_38";
 const gridBlock = "_gridBlock_6gy3c_39";
 const blockTitle = "_blockTitle_6gy3c_46";
 const grid = "_grid_6gy3c_39";
-const styles$2 = {
+const styles$3 = {
   pcp,
   blocks,
   featured,
@@ -8066,16 +8273,16 @@ function Block({ block }) {
     case "lifestyle_text":
       return /* @__PURE__ */ jsx(LifestyleText, { text: block.text, align: block.align });
     case "featured":
-      return /* @__PURE__ */ jsxs("div", { className: styles$2.featured, children: [
-        block.title && /* @__PURE__ */ jsx("h2", { className: styles$2.blockTitle, children: block.title }),
+      return /* @__PURE__ */ jsxs("div", { className: styles$3.featured, children: [
+        block.title && /* @__PURE__ */ jsx("h2", { className: styles$3.blockTitle, children: block.title }),
         /* @__PURE__ */ jsx(ProductTile, { product: block.product, priority: true, size: "large" })
       ] });
     case "lifestyle_image":
       return /* @__PURE__ */ jsx(LifestyleImage, { images: block.images });
     case "grid":
-      return /* @__PURE__ */ jsxs("div", { className: styles$2.gridBlock, children: [
-        /* @__PURE__ */ jsx("h2", { className: styles$2.blockTitle, children: block.title }),
-        /* @__PURE__ */ jsx("ul", { className: styles$2.grid, children: block.products.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ProductTile, { product: p }) }, p.sku)) })
+      return /* @__PURE__ */ jsxs("div", { className: styles$3.gridBlock, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles$3.blockTitle, children: block.title }),
+        /* @__PURE__ */ jsx("ul", { className: styles$3.grid, children: block.products.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ProductTile, { product: p }) }, p.sku)) })
       ] });
     case "review":
       return /* @__PURE__ */ jsx(ReviewCarousel, { quotes: block.quotes, disclaimer: block.disclaimer });
@@ -8088,9 +8295,9 @@ function Block({ block }) {
   }
 }
 function CategoryContent({ page: page2 }) {
-  return /* @__PURE__ */ jsxs(ShopSurface, { tone: "dark", fill: true, className: styles$2.pcp, children: [
+  return /* @__PURE__ */ jsxs(ShopSurface, { tone: "dark", fill: true, className: styles$3.pcp, children: [
     /* @__PURE__ */ jsx(PcpHero, { hero: page2.hero }),
-    /* @__PURE__ */ jsx("div", { className: styles$2.blocks, children: page2.blocks.map((block, i) => /* @__PURE__ */ jsx(Block, { block }, i)) })
+    /* @__PURE__ */ jsx("div", { className: styles$3.blocks, children: page2.blocks.map((block, i) => /* @__PURE__ */ jsx(Block, { block }, i)) })
   ] });
 }
 function CategoryView({ code, initialData, onNotFound }) {
@@ -8186,13 +8393,13 @@ const heroTitle = "_heroTitle_ems17_107";
 const heroSub = "_heroSub_ems17_115";
 const swipe = "_swipe_ems17_122";
 const swipeLabel = "_swipeLabel_ems17_131";
-const chevron = "_chevron_ems17_137";
-const overlay = "_overlay_ems17_154";
+const chevron$1 = "_chevron_ems17_137";
+const overlay$1 = "_overlay_ems17_154";
 const copy = "_copy_ems17_165";
-const title = "_title_ems17_170";
-const subtitle = "_subtitle_ems17_177";
+const title$1 = "_title_ems17_170";
+const subtitle$1 = "_subtitle_ems17_177";
 const cta = "_cta_ems17_183";
-const styles$1 = {
+const styles$2 = {
   showcase,
   panel,
   image,
@@ -8205,11 +8412,11 @@ const styles$1 = {
   heroSub,
   swipe,
   swipeLabel,
-  chevron,
-  overlay,
+  chevron: chevron$1,
+  overlay: overlay$1,
   copy,
-  title,
-  subtitle,
+  title: title$1,
+  subtitle: subtitle$1,
   cta
 };
 const FALLBACK_PANELS = [
@@ -8258,7 +8465,7 @@ const FALLBACK_PANELS = [
   }
 ];
 function CategoryPanel({ panel: panel2 }) {
-  return /* @__PURE__ */ jsxs("section", { className: styles$1.panel, "aria-label": panel2.title, children: [
+  return /* @__PURE__ */ jsxs("section", { className: styles$2.panel, "aria-label": panel2.title, children: [
     /* @__PURE__ */ jsx(
       ShopImage,
       {
@@ -8266,15 +8473,15 @@ function CategoryPanel({ panel: panel2 }) {
         alt: "",
         fill: true,
         sizes: "(max-width: 480px) 100vw, 480px",
-        className: styles$1.image
+        className: styles$2.image
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: styles$1.overlay, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$1.copy, children: [
-        /* @__PURE__ */ jsx("h2", { className: styles$1.title, children: panel2.title }),
-        /* @__PURE__ */ jsx("p", { className: styles$1.subtitle, children: panel2.subtitle })
+    /* @__PURE__ */ jsxs("div", { className: styles$2.overlay, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$2.copy, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles$2.title, children: panel2.title }),
+        /* @__PURE__ */ jsx("p", { className: styles$2.subtitle, children: panel2.subtitle })
       ] }),
-      /* @__PURE__ */ jsx(ShopLink, { to: panel2.to, className: styles$1.cta, "aria-label": `${panel2.title} — ${panel2.cta}`, children: panel2.cta })
+      /* @__PURE__ */ jsx(ShopLink, { to: panel2.to, className: styles$2.cta, "aria-label": `${panel2.title} — ${panel2.cta}`, children: panel2.cta })
     ] })
   ] });
 }
@@ -8317,9 +8524,9 @@ function HomeShowcase() {
      * showcase paints its own dark ground and now owns its own height, so there is nothing
      * for the surface to fill.
      */
-    /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", children: /* @__PURE__ */ jsxs("div", { className: styles$1.showcase, ref: showcaseRef, children: [
-      /* @__PURE__ */ jsxs("section", { className: `${styles$1.panel} ${styles$1.hero}`, "aria-label": "DAZN Shop", children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1.heroImageBox, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", children: /* @__PURE__ */ jsxs("div", { className: styles$2.showcase, ref: showcaseRef, children: [
+      /* @__PURE__ */ jsxs("section", { className: `${styles$2.panel} ${styles$2.hero}`, "aria-label": "DAZN Shop", children: [
+        /* @__PURE__ */ jsx("div", { className: styles$2.heroImageBox, children: /* @__PURE__ */ jsx(
           ShopImage,
           {
             src: "/figma/home/hero.jpg",
@@ -8327,25 +8534,25 @@ function HomeShowcase() {
             fill: true,
             priority: true,
             sizes: "(max-width: 480px) 100vw, 480px",
-            className: styles$1.image
+            className: styles$2.image
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: styles$1.heroContent, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles$1.heroText, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$2.heroContent, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$2.heroText, children: [
             /* @__PURE__ */ jsx(
               "img",
               {
                 src: assetUrl("/figma/home/dazn-logo.svg"),
                 alt: "DAZN",
-                className: styles$1.logo
+                className: styles$2.logo
               }
             ),
-            /* @__PURE__ */ jsx("h1", { className: styles$1.heroTitle, children: "DAZN SHOP" }),
-            /* @__PURE__ */ jsx("p", { className: styles$1.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
+            /* @__PURE__ */ jsx("h1", { className: styles$2.heroTitle, children: "DAZN SHOP" }),
+            /* @__PURE__ */ jsx("p", { className: styles$2.heroSub, children: "Fresh drops inspired by sport, culture, and everyday movement" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: styles$1.swipe, children: [
-            /* @__PURE__ */ jsx("p", { className: styles$1.swipeLabel, children: "Swipe down for more" }),
-            /* @__PURE__ */ jsx("svg", { className: styles$1.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: styles$2.swipe, children: [
+            /* @__PURE__ */ jsx("p", { className: styles$2.swipeLabel, children: "Swipe down for more" }),
+            /* @__PURE__ */ jsx("svg", { className: styles$2.chevron, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
               "path",
               {
                 d: "M6 9l6 6 6-6",
@@ -8405,15 +8612,15 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header = "_header_7rinq_6";
+const header$1 = "_header_7rinq_6";
 const floating = "_floating_7rinq_26";
 const right = "_right_7rinq_35";
 const spacer = "_spacer_7rinq_48";
 const iconBtn = "_iconBtn_7rinq_53";
 const menuBtn = "_menuBtn_7rinq_80";
 const badge = "_badge_7rinq_104";
-const styles = {
-  header,
+const styles$1 = {
+  header: header$1,
   floating,
   right,
   spacer,
@@ -8466,19 +8673,19 @@ function ShopHeader({
 }) {
   const cartCount = useCartCount();
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
-  const classes = [styles.header, floating2 ? styles.floating : "", className ?? ""].filter(Boolean).join(" ");
+  const classes = [styles$1.header, floating2 ? styles$1.floating : "", className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
-    onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles.spacer, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs("div", { className: styles.right, children: [
-      showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles.iconBtn, "aria-label": cartLabel, children: [
+    onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
+      showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),
-        cartCount === null ? null : /* @__PURE__ */ jsx("span", { className: styles.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount })
+        cartCount === null ? null : /* @__PURE__ */ jsx("span", { className: styles$1.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount })
       ] }) : null,
       onMenu ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: `${styles.iconBtn} ${styles.menuBtn}`,
+          className: `${styles$1.iconBtn} ${styles$1.menuBtn}`,
           "aria-label": menuLabel,
           onClick: onMenu,
           children: /* @__PURE__ */ jsx(MenuIcon, {})
@@ -8487,6 +8694,186 @@ function ShopHeader({
     ] })
   ] });
 }
+const overlay = "_overlay_lm5qk_5";
+const scrim = "_scrim_lm5qk_17";
+const sheet = "_sheet_lm5qk_23";
+const header = "_header_lm5qk_56";
+const close = "_close_lm5qk_62";
+const list = "_list_lm5qk_81";
+const row = "_row_lm5qk_89";
+const icon = "_icon_lm5qk_119";
+const text = "_text_lm5qk_127";
+const title = "_title_lm5qk_135";
+const subtitle = "_subtitle_lm5qk_142";
+const chevron = "_chevron_lm5qk_148";
+const styles = {
+  overlay,
+  scrim,
+  sheet,
+  header,
+  close,
+  list,
+  row,
+  icon,
+  text,
+  title,
+  subtitle,
+  chevron
+};
+function OrderIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("g", { transform: "translate(2.987 2.498)", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M1.4 4.467C1.14036 4.81319 1 5.23426 1 5.667L1.01416 15.9991C1.01416 16.5295 1.22487 17.0382 1.59995 17.4133C1.97502 17.7884 2.48373 17.9991 3.01416 17.9991L15.0267 18.0043C15.5571 18.0043 16.0658 17.7935 16.4409 17.4185C16.816 17.0434 17.0267 16.5347 17.0267 16.0043L17.0125 5.67219C17.0125 5.23945 16.8722 4.81838 16.6125 4.47219L14.6125 1.80519C14.4262 1.5568 14.1847 1.35519 13.907 1.21634C13.6292 1.07748 13.323 1.00519 13.0125 1.00519L5 1C4.68951 1 4.38328 1.07229 4.10557 1.21115C3.82786 1.35 3.5863 1.55161 3.4 1.8L1.4 4.467Z",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("g", { transform: "translate(4.1 6.267)", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0.9 0.9H14.9001",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("g", { transform: "translate(7.36 10.09)", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.37949 0.9C8.37949 1.89184 7.98548 2.84306 7.28415 3.5444C6.58281 4.24574 5.63159 4.63975 4.63975 4.63975C3.6479 4.63975 2.69668 4.24574 1.99535 3.5444C1.29401 2.84306 0.9 1.89184 0.9 0.9",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) })
+  ] });
+}
+function GiftIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { transform: "translate(1.94 2.995)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M13.751 0.00124025C14.5259 0.00509296 15.2681 0.313462 15.8164 0.861592C16.368 1.41322 16.6786 2.16162 16.6787 2.94167C16.6787 3.33886 16.5962 3.72712 16.4443 4.0862L18.21 4.08425C19.2573 4.08425 20.1182 4.92951 20.1182 5.98464V7.98464C20.118 8.77361 19.6366 9.44353 18.9561 9.73171V15.011C18.9561 15.8024 18.6451 16.5636 18.0889 17.1272C17.6018 17.6207 16.9612 17.9275 16.2773 17.9964L15.9814 18.011L4.14355 18.0051C3.35071 18.005 2.59271 17.6863 2.03613 17.1223C1.47995 16.5588 1.16992 15.7965 1.16992 15.0051V9.76198C0.48514 9.4754 0.000197787 8.80207 0 8.01003V6.01003C3.22233e-05 4.95527 0.859419 4.11117 1.90625 4.11062L3.68457 4.10671C3.52717 3.74203 3.44242 3.34633 3.44238 2.94167C3.4425 2.16158 3.7531 1.41323 4.30469 0.861592C4.85271 0.313663 5.59461 0.00439982 6.36914 0.000263685C6.37301 0.000209284 6.377 0.00129387 6.38086 0.00124025C6.38214 0.00120826 6.38348 0.00124029 6.38477 0.00124025C7.48869 -0.0127605 8.48921 0.527887 9.26953 1.39479C9.56436 1.7224 9.82868 2.09657 10.0605 2.50612C10.2924 2.09651 10.5567 1.72244 10.8516 1.39479C11.6319 0.527865 12.6324 -0.0136996 13.7363 0.000263685L13.7393 0.00124025C13.7435 0.0012842 13.7477 0.000190595 13.752 0.000263685L13.751 0.00124025ZM3.16992 9.90749V15.0051C3.16992 15.2745 3.2759 15.5305 3.45996 15.7171C3.64354 15.9031 3.88967 16.005 4.14355 16.0051L15.9814 16.01C16.2355 16.01 16.4823 15.909 16.666 15.7229C16.8271 15.5597 16.9284 15.3435 16.9512 15.1116L16.9561 15.011V9.88601L3.16992 9.90749ZM1.9082 5.91042C1.84343 5.91045 1.80082 5.96063 1.80078 6.01003V8.01003C1.80105 8.05904 1.84222 8.10813 1.90625 8.10866L18.21 8.08425C18.2746 8.08425 18.3181 8.03392 18.3184 7.98464V5.98464C18.3184 5.9352 18.2758 5.88503 18.2109 5.88503L1.9082 5.91042ZM6.38477 1.80007C6.0819 1.8001 5.79131 1.92087 5.57715 2.13503C5.36332 2.34907 5.24329 2.63912 5.24316 2.94167C5.24323 3.24435 5.3632 3.53519 5.57715 3.74929C5.79129 3.96335 6.08197 4.08422 6.38477 4.08425C6.44761 4.08425 6.50914 4.08955 6.56836 4.10183L8.83203 4.09792C8.58292 3.48766 8.27452 2.97992 7.93164 2.5989C7.4044 2.01319 6.86607 1.79198 6.40039 1.80007C6.39524 1.80016 6.38992 1.80007 6.38477 1.80007ZM13.7207 1.80007C13.255 1.79196 12.7167 2.0131 12.1895 2.5989C11.847 2.9794 11.538 3.48583 11.2891 4.09499L13.6289 4.09108C13.6641 4.08689 13.7 4.08425 13.7363 4.08425C14.0392 4.08423 14.3298 3.9634 14.5439 3.74929C14.758 3.53518 14.8788 3.2444 14.8789 2.94167C14.8788 2.63911 14.7578 2.34907 14.5439 2.13503C14.3298 1.92086 14.0392 1.80009 13.7363 1.80007C13.7312 1.80007 13.7259 1.80016 13.7207 1.80007Z",
+      fill: "currentColor"
+    }
+  ) }) });
+}
+function HelpIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1.93 1.93)", children: [
+    /* @__PURE__ */ 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"
+      }
+    ),
+    /* @__PURE__ */ 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"
+      }
+    ),
+    /* @__PURE__ */ 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 /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { transform: "translate(4.28 1.957)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.42763 6.03763C7.42763 5.83763 7.33763 5.64763 7.18763 5.51763L1.15763 0.177629C0.867628 -0.0823714 0.427629 -0.0523713 0.177629 0.237629C-0.0823713 0.527629 -0.0523714 0.967629 0.237629 1.22763L5.67763 6.04763L0.237629 10.8576C-0.0523709 11.1176 -0.0823709 11.5576 0.177629 11.8476C0.437629 12.1376 0.877629 12.1676 1.16763 11.9076L7.19763 6.56763C7.34763 6.43763 7.43763 6.24763 7.43763 6.04763L7.42763 6.03763Z",
+      fill: "currentColor"
+    }
+  ) }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
+function ShopMenuSheet({
+  open,
+  onClose,
+  onManageOrders,
+  onRedeemCode,
+  onHelp,
+  closeLabel = "Close",
+  label: label2 = "Shop menu"
+}) {
+  const sheetRef = useRef(null);
+  useModalDialog(open, onClose, sheetRef);
+  if (!open) return null;
+  const rows = [
+    {
+      key: "orders",
+      icon: /* @__PURE__ */ jsx(OrderIcon, {}),
+      title: "Manage orders",
+      subtitle: "View your order history and track shipments",
+      ...onManageOrders ? { onSelect: onManageOrders } : {}
+    },
+    {
+      key: "redeem",
+      icon: /* @__PURE__ */ jsx(GiftIcon, {}),
+      title: "Redeem a code",
+      subtitle: "Got a code for DAZN shop? Claim it here",
+      ...onRedeemCode ? { onSelect: onRedeemCode } : {}
+    },
+    {
+      key: "help",
+      icon: /* @__PURE__ */ jsx(HelpIcon, {}),
+      title: "Help & Support",
+      ...onHelp ? { onSelect: onHelp } : {}
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: styles.overlay, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.scrim, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      ShopSurface,
+      {
+        tone: "light",
+        className: styles.sheet,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": label2,
+        ref: sheetRef,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
+          /* @__PURE__ */ jsx("ul", { className: styles.list, children: rows.map((row2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles.row,
+              onClick: row2.onSelect,
+              disabled: !row2.onSelect,
+              "aria-disabled": row2.onSelect ? void 0 : true,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles.icon, children: row2.icon }),
+                /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.title, children: row2.title }),
+                  row2.subtitle && /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: row2.subtitle })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: styles.chevron, children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+              ]
+            }
+          ) }, row2.key)) })
+        ]
+      }
+    )
+  ] });
+}
 export {
   Badge,
   BottomSheet,
@@ -8509,6 +8896,8 @@ export {
   LifestyleImage,
   LifestyleText,
   MediaGallery,
+  OrderListView,
+  OrderStatusBadge,
   OrderSummary,
   OrderTimeline,
   OrderTrackingView,
@@ -8531,6 +8920,7 @@ export {
   HomeShowcase as ShopHome,
   ShopImage,
   ShopLink,
+  ShopMenuSheet,
   ShopSurface,
   SizeGuideSheet,
   SizeSelector,