@nok-integration/storefront-react 0.16.4 → 0.17.0

package/dist/index.mjs

@@ -4680,6 +4680,19 @@ function requireOrders() {
       /** Per-unit, for reconciliation and the credit note. We never recompute it. */
       unit_price: money_1.Money,
       line_total: money_1.Money,
+      /**
+       * What the line would have cost undiscounted, per unit. Display only.
+       *
+       * The order screens draw a struck-through price and a discount badge beside the price
+       * paid, and this is the only place that figure can honestly come from. Our catalogue
+       * holds a `compare_at` too, but a receipt read from the catalogue is a receipt that
+       * changes when merchandising does; what the fan was shown at the moment they bought is
+       * DAZN's to state, once, here.
+       *
+       * Optional, and absent means the line was sold at full price. A value equal to or below
+       * `unit_price` is treated the same way rather than drawn as a saving of zero or less.
+       */
+      compare_at_unit_price: money_1.Money.optional(),
       /** Display name as DAZN sold it. Advisory: the picking list shows Odoo's own. */
       title: zod_1.z.string().optional()
     });
@@ -4700,6 +4713,18 @@ function requireOrders() {
       items: money_1.Money,
       shipping: money_1.Money,
       tax: money_1.Money,
+      /**
+       * What came off, as a positive amount. Optional; absent means nothing did.
+       *
+       * Positive rather than signed, and the surfaces that draw it own the minus sign. A
+       * signed field invites the reader to add it to a running total, and nothing here is a
+       * running total: `grand_total` is what DAZN charged and is never derived from the parts.
+       *
+       * Kept out of `items` deliberately. The order screen lists a subtotal and a discount as
+       * two rows because the fan is owed both figures, and folding the saving into the
+       * subtotal loses the one they care about.
+       */
+      discount: money_1.Money.optional(),
       grand_total: money_1.Money
     });
     exports.OrderPaymentSummary = zod_1.z.object({
@@ -4827,6 +4852,14 @@ function requireOrderTracking() {
       qty: zod_1.z.number().int().positive(),
       unit_price: money_1.Money,
       line_total: money_1.Money,
+      /**
+       * The undiscounted per-unit price, echoed from intake. Display only.
+       *
+       * Drawn as a struck-through price with a saving badge beside what was paid. Absent
+       * means the line was sold at full price, which is the ordinary case; see `OrderLine`
+       * for why this is DAZN's figure and not our catalogue's.
+       */
+      compare_at_unit_price: money_1.Money.optional(),
       title: zod_1.z.string().optional(),
       image: common_1.Url.optional(),
       /** Variant attributes, e.g. `{ size: 'M' }`. Same shape as everywhere else. */
@@ -4869,6 +4902,18 @@ function requireOrderTracking() {
       order_ref: ids_1.OrderRef,
       placed_at: common_1.Timestamp,
       currency: money_1.Currency,
+      /**
+       * Where the order confirmation went, for the confirmation screen's "We've sent a
+       * confirmation to ..." line. The address DAZN gave us at intake, echoed back.
+       *
+       * Returned only on the detail read, which is already scoped to the order's own owner,
+       * and never on the list. It is PII: render it, and keep it out of logs and analytics
+       * like every other address in this package.
+       *
+       * Optional because intake's is: a market whose carrier takes no email places orders
+       * without one. Absent means the line is not drawn, never that a placeholder is.
+       */
+      email: zod_1.z.string().email().optional(),
       status: exports.OrderProgressStep,
       headline: zod_1.z.string().min(1),
       estimated_delivery: zod_1.z.object({ from: common_1.Timestamp, to: common_1.Timestamp }).optional(),
@@ -4908,6 +4953,54 @@ function requireStockAlerts() {
   });
   return stockAlerts;
 }
+var support = {};
+var hasRequiredSupport;
+function requireSupport() {
+  if (hasRequiredSupport) return support;
+  hasRequiredSupport = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SupportAttachment = exports.SupportTicket = exports.SupportTicketRequest = exports.SupportCategory = void 0;
+    const zod_1 = /* @__PURE__ */ requireZod();
+    const common_1 = requireCommon();
+    exports.SupportCategory = zod_1.z.string().trim().min(1).max(120);
+    exports.SupportTicketRequest = zod_1.z.object({
+      /**
+       * Where the fan wants the reply. Pre-filled from the account in the design, and
+       * editable — so this is a contact address, not proof of identity.
+       */
+      email: zod_1.z.string().email().max(254),
+      category: exports.SupportCategory,
+      /**
+       * The fan's own words. Bounded at 4000 characters because an unbounded text column
+       * reachable from the open internet is a storage-exhaustion vector, not because CS
+       * asked for a limit — they have not, and this is the one number here we chose. It is
+       * roughly two pages, and it is configuration away from being different.
+       */
+      description: zod_1.z.string().trim().min(1).max(4e3),
+      /**
+       * One attachment, as a URL — the shape CS specified.
+       *
+       * The URL is not free-form: it must be one the engine issued from
+       * `POST /v1/support/attachments`. A ticket carrying an arbitrary address would have a
+       * CS agent's browser fetch whatever a stranger typed, from inside DAZN's network, on
+       * a page showing another customer's data.
+       */
+      image_url: zod_1.z.string().url().max(2048).optional()
+    }).strict();
+    exports.SupportTicket = zod_1.z.object({
+      reference: zod_1.z.string().min(1),
+      category: exports.SupportCategory,
+      created_at: common_1.Timestamp
+    });
+    exports.SupportAttachment = zod_1.z.object({
+      url: zod_1.z.string().url(),
+      content_type: zod_1.z.string().min(1),
+      bytes: zod_1.z.number().int().positive()
+    });
+  })(support);
+  return support;
+}
 var errors = {};
 var hasRequiredErrors;
 function requireErrors() {
@@ -4938,6 +5031,11 @@ function requireErrors() {
       // "this fan has an empty cart" are the same fact to a caller about to charge for it, and
       // neither should be checked out. One answer, and it is not a success.
       "cart_not_found",
+      // A Help Center ticket reference the engine does not hold (ADR-0021). Distinct from
+      // `invalid_request` because nothing about the request is malformed, and distinct from
+      // `order_not_found` because saying "unknown order" about a support ticket sends whoever
+      // reads it looking in the wrong table.
+      "support_ticket_not_found",
       // Admin/CMS (`/admin/v1`). The error OBJECT is shared infrastructure — one shape, one
       // `code` vocabulary, one filter — so admin failures name themselves here rather than in
       // a second enum. `forbidden` is authenticated-but-not-permitted, which `unauthorized`
@@ -4961,6 +5059,7 @@ function requireErrors() {
       order_not_found: 404,
       order_not_cancellable: 409,
       cart_not_found: 404,
+      support_ticket_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
       rate_limited: 429,
@@ -4992,6 +5091,7 @@ function requireClient() {
   const session_1 = requireSession();
   const order_tracking_1 = requireOrderTracking();
   const stock_alerts_1 = requireStockAlerts();
+  const support_1 = requireSupport();
   const errors_1 = requireErrors();
   class DaznApiError extends Error {
     status;
@@ -5054,6 +5154,33 @@ function requireClient() {
       }
       return config.schema.parse(await res.json());
     }
+    async function upload(path, file, schema) {
+      const token = await options2.getToken?.();
+      const headers = {
+        accept: "application/json",
+        ...options2.defaultHeaders
+      };
+      if (token)
+        headers["authorization"] = `Bearer ${token}`;
+      const form = new FormData();
+      form.append("file", file);
+      const res = await doFetch(`${base}${path}`, {
+        method: "POST",
+        headers,
+        credentials: options2.credentials ?? "include",
+        body: form
+      });
+      if (!res.ok) {
+        let parsed;
+        try {
+          parsed = errors_1.ErrorResponse.parse(await res.json());
+        } catch {
+          parsed = void 0;
+        }
+        throw new DaznApiError(res.status, parsed);
+      }
+      return schema.parse(await res.json());
+    }
     return {
       catalog: {
         listProducts: (query = {}) => request({
@@ -5147,6 +5274,22 @@ function requireClient() {
           schema: order_tracking_1.OrderDetail
         })
       },
+      /**
+       * The Help Center form (ADR-0021). Session-scoped: the ticket is filed against the
+       * fan already signed in, and there is no parameter that names a different one.
+       */
+      support: {
+        /**
+         * Upload the one attachment and get the URL to put on the ticket.
+         *
+         * Call this first, then pass the returned `url` as `image_url`. Uploading nothing is
+         * the normal case — the field is optional and the form's Send button does not wait
+         * on it.
+         */
+        uploadAttachment: (file) => upload("/support/attachments", file, support_1.SupportAttachment),
+        /** File the ticket. Repeating an identical one within a few minutes returns the first. */
+        createTicket: (body2) => request({ method: "POST", path: "/support/tickets", body: body2, schema: support_1.SupportTicket })
+      },
       auth: {
         /** Exchange a single-use DAZN identity JWT for a session (sets the cookie). */
         exchangeSession: (body2) => request({
@@ -5397,7 +5540,7 @@ 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$H = {
+const styles$I = {
   badge: badge$4,
   neutral: neutral$1,
   success: success$1,
@@ -5405,25 +5548,23 @@ const styles$H = {
   promo
 };
 function Badge({ tone = "neutral", 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";
-const primary = "_primary_vvcmd_27";
-const secondary = "_secondary_vvcmd_32";
-const ghost = "_ghost_vvcmd_38";
-const spinner = "_spinner_vvcmd_54";
-const spin = "_spin_vvcmd_54";
-const labelLoading = "_labelLoading_vvcmd_63";
-const styles$G = {
+  return /* @__PURE__ */ jsx("span", { className: [styles$I.badge, styles$I[tone]].join(" "), children });
+}
+const button$1 = "_button_tdhm8_1";
+const fullWidth = "_fullWidth_tdhm8_25";
+const primary = "_primary_tdhm8_29";
+const secondary = "_secondary_tdhm8_34";
+const ghost = "_ghost_tdhm8_40";
+const spinner = "_spinner_tdhm8_62";
+const spin = "_spin_tdhm8_62";
+const styles$H = {
   button: button$1,
   fullWidth,
   primary,
   secondary,
   ghost,
   spinner,
-  spin,
-  labelLoading
+  spin
 };
 const Button = forwardRef(function Button2({
   variant = "primary",
@@ -5442,23 +5583,23 @@ const Button = forwardRef(function Button2({
       ref,
       type,
       className: [
-        styles$G.button,
-        styles$G[variant],
-        fullWidth2 ? styles$G.fullWidth : "",
+        styles$H.button,
+        styles$H[variant],
+        fullWidth2 ? styles$H.fullWidth : "",
         className ?? ""
       ].filter(Boolean).join(" "),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        loading && /* @__PURE__ */ jsx("span", { className: styles$G.spinner, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: loading ? styles$G.labelLoading : void 0, children })
+        loading && /* @__PURE__ */ jsx("span", { className: styles$H.spinner, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children })
       ]
     }
   );
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$F = {
+const styles$G = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5471,14 +5612,14 @@ function Skeleton({ width, height, radius, className, circle }) {
     "span",
     {
       "aria-hidden": "true",
-      className: [styles$F.skeleton, className ?? ""].filter(Boolean).join(" "),
+      className: [styles$G.skeleton, className ?? ""].filter(Boolean).join(" "),
       style
     }
   );
 }
 const surface$1 = "_surface_cfqo9_10";
 const fill = "_fill_cfqo9_35";
-const styles$E = {
+const styles$F = {
   surface: surface$1,
   fill
 };
@@ -5519,7 +5660,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
       ...rest,
       ref: attach,
       "data-shop-theme": tone,
-      className: [styles$E.surface, fill2 ? styles$E.fill : "", className ?? ""].filter(Boolean).join(" "),
+      className: [styles$F.surface, fill2 ? styles$F.fill : "", className ?? ""].filter(Boolean).join(" "),
       children
     }
   );
@@ -5527,17 +5668,17 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
 const root$6 = "_root_ney0g_1";
 const inner = "_inner_ney0g_6";
 const media$3 = "_media_ney0g_20";
-const lines$2 = "_lines_ney0g_32";
+const lines$3 = "_lines_ney0g_32";
 const lineWide = "_lineWide_ney0g_41";
 const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
 const row$8 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$D = {
+const styles$E = {
   root: root$6,
   inner,
   media: media$3,
-  lines: lines$2,
+  lines: lines$3,
   lineWide,
   lineMid,
   lineNarrow,
@@ -5545,34 +5686,34 @@ const styles$D = {
   action: action$2
 };
 function ScreenSkeleton({ tone, shape = "media" }) {
-  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 })
+  return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$E.root, children: /* @__PURE__ */ jsx("div", { className: styles$E.inner, role: "status", "aria-label": "Loading", children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: styles$E.media }),
+    /* @__PURE__ */ jsxs("div", { className: styles$E.lines, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 22, className: styles$E.lineWide }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$E.lineMid }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 16, className: styles$E.lineNarrow })
     ] }),
-    /* @__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)) }) }) });
+    /* @__PURE__ */ jsx(Skeleton, { height: 48, radius: 8, className: styles$E.action })
+  ] }) : /* @__PURE__ */ jsx("div", { className: styles$E.lines, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { height: 72, className: styles$E.row }, i)) }) }) });
 }
 const root$5 = "_root_1u83t_1";
 const icon$4 = "_icon_1u83t_10";
-const title$h = "_title_1u83t_15";
+const title$j = "_title_1u83t_15";
 const body$5 = "_body_1u83t_20";
 const action$1 = "_action_1u83t_33";
-const styles$C = {
+const styles$D = {
   root: root$5,
   icon: icon$4,
-  title: title$h,
+  title: title$j,
   body: body$5,
   action: action$1
 };
 function EmptyState({ title: title2, body: body2, action: action2, icon: icon2 }) {
-  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 })
+  return /* @__PURE__ */ jsxs("div", { className: styles$D.root, role: "status", children: [
+    icon2 && /* @__PURE__ */ jsx("div", { className: styles$D.icon, children: icon2 }),
+    /* @__PURE__ */ jsx("h2", { className: styles$D.title, children: title2 }),
+    body2 && /* @__PURE__ */ jsx("p", { className: styles$D.body, children: body2 }),
+    action2 && /* @__PURE__ */ jsx("div", { className: styles$D.action, children: action2 })
   ] });
 }
 const TREATMENTS = {
@@ -5658,6 +5799,14 @@ const TREATMENTS = {
     body: "We could not find that order.",
     retriable: false
   },
+  support_ticket_not_found: {
+    title: "Request not found",
+    // "Request", not "ticket": the fan sent a message from the Help Center and has no
+    // reason to know we filed it as a ticket anywhere. Not retriable, because the same
+    // reference answers the same way every time.
+    body: "We could not find that support request.",
+    retriable: false
+  },
   order_not_cancellable: {
     title: "Too late to change this",
     body: "This order has already been despatched.",
@@ -5701,19 +5850,19 @@ function isDuplicateOrder(err) {
   return codeOf(err) === "duplicate_order";
 }
 const root$4 = "_root_1lbpx_1";
-const title$g = "_title_1lbpx_10";
+const title$i = "_title_1lbpx_10";
 const body$4 = "_body_1lbpx_15";
-const styles$B = {
+const styles$C = {
   root: root$4,
-  title: title$g,
+  title: title$i,
   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$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 }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$C.root, role: "alert", children: [
+    /* @__PURE__ */ jsx("h2", { className: styles$C.title, children: title2 ?? treatment.title }),
+    /* @__PURE__ */ jsx("p", { className: styles$C.body, children: body2 ?? treatment.body }),
     showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? "Try again" })
   ] });
 }
@@ -5738,20 +5887,24 @@ function StatusBadge({ status: status2 }) {
   const label2 = STATUS_LABEL[status2] ?? status2;
   return /* @__PURE__ */ jsx(Badge, { tone, children: label2 });
 }
-const viewport = "_viewport_1lt9i_1";
-const toast = "_toast_1lt9i_15";
-const text$4 = "_text_1lt9i_32";
-const message$1 = "_message_1lt9i_39";
-const action = "_action_1lt9i_44";
-const neutral = "_neutral_1lt9i_63";
-const success = "_success_1lt9i_68";
-const critical = "_critical_1lt9i_73";
-const rich = "_rich_1lt9i_81";
-const description = "_description_1lt9i_96";
-const thumb$1 = "_thumb_1lt9i_113";
-const thumbImage = "_thumbImage_1lt9i_124";
-const styles$A = {
+const viewport = "_viewport_5aafz_14";
+const anchor = "_anchor_5aafz_41";
+const caret = "_caret_5aafz_59";
+const toast = "_toast_5aafz_82";
+const text$4 = "_text_5aafz_111";
+const message$1 = "_message_5aafz_120";
+const action = "_action_5aafz_133";
+const neutral = "_neutral_5aafz_158";
+const success = "_success_5aafz_163";
+const critical = "_critical_5aafz_168";
+const rich = "_rich_5aafz_183";
+const description = "_description_5aafz_198";
+const thumb$2 = "_thumb_5aafz_216";
+const thumbImage = "_thumbImage_5aafz_227";
+const styles$B = {
   viewport,
+  anchor,
+  caret,
   toast,
   text: text$4,
   message: message$1,
@@ -5761,10 +5914,14 @@ const styles$A = {
   critical,
   rich,
   description,
-  thumb: thumb$1,
+  thumb: thumb$2,
   thumbImage
 };
 const ToastContext = createContext(null);
+const CART_TRIGGER_SELECTOR = "[data-shop-cart-trigger]";
+const CARET_GAP = 32;
+const EDGE_GAP = 12;
+const CARET_MIN_INSET = 24;
 function useToast() {
   const ctx = useContext(ToastContext);
   const emit = useShopOptional()?.emit;
@@ -5781,9 +5938,19 @@ function useToast() {
 function normalise(toneOrOptions) {
   return typeof toneOrOptions === "string" ? { tone: toneOrOptions } : toneOrOptions ?? {};
 }
+function Caret() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "10", viewBox: "0 0 24 10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M0 10L10.8906 0.280023C11.5624 -0.0933413 12.4376 -0.0933413 13.1094 0.280025L24 10H0Z",
+      fill: "#080E12"
+    }
+  ) });
+}
 let nextId = 0;
 function ToastProvider({ children }) {
   const [toasts, setToasts] = useState([]);
+  const viewportRef = useRef(null);
   const dismiss = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
@@ -5811,38 +5978,79 @@ function ToastProvider({ children }) {
     },
     [dismiss, hostOwnsNotifications, emit]
   );
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || toasts.length === 0) return;
+    const measure = () => {
+      const trigger = document.querySelector(CART_TRIGGER_SELECTOR);
+      const icon2 = trigger ? trigger.getBoundingClientRect() : null;
+      if (!icon2 || icon2.width === 0 || icon2.bottom <= 0 || icon2.top >= window.innerHeight) {
+        el.style.setProperty("--toast-top", `${EDGE_GAP}px`);
+        el.style.removeProperty("--toast-caret-right");
+        return;
+      }
+      el.style.setProperty("--toast-top", `${Math.round(icon2.bottom + CARET_GAP)}px`);
+      const card2 = el.firstElementChild;
+      if (!card2) return;
+      const box2 = card2.getBoundingClientRect();
+      const centre = icon2.left + icon2.width / 2;
+      const inset2 = Math.min(
+        Math.max(box2.right - centre, CARET_MIN_INSET),
+        Math.max(box2.width - CARET_MIN_INSET, CARET_MIN_INSET)
+      );
+      el.style.setProperty("--toast-caret-right", `${Math.round(inset2)}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("orientationchange", measure);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("orientationchange", measure);
+    };
+  }, [toasts.length]);
   const api = useMemo(() => ({ show }), [show]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx("div", { className: styles$A.viewport, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((t) => {
+    /* @__PURE__ */ jsx("div", { className: styles$B.viewport, ref: viewportRef, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((t) => {
       const rich2 = Boolean(t.description || t.image);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: [styles$A.toast, rich2 ? styles$A.rich : styles$A[t.tone]].join(" "),
-          role: "status",
-          children: [
-            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$A.action,
-                onClick: () => {
-                  t.action?.onAction();
-                  dismiss(t.id);
-                },
-                children: t.action.label
-              }
-            )
-          ]
-        },
-        t.id
-      );
+      return /* @__PURE__ */ jsxs("div", { className: styles$B.anchor, children: [
+        t.anchor === "cart" && /* @__PURE__ */ jsx("span", { className: styles$B.caret, children: /* @__PURE__ */ jsx(Caret, {}) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [styles$B.toast, rich2 ? styles$B.rich : styles$B[t.tone]].join(" "),
+            role: "status",
+            children: [
+              t.image && /* @__PURE__ */ jsx("span", { className: styles$B.thumb, children: /* @__PURE__ */ jsx(
+                ShopImage,
+                {
+                  src: t.image,
+                  alt: "",
+                  fill: true,
+                  sizes: "40px",
+                  className: styles$B.thumbImage
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("span", { className: styles$B.text, children: [
+                /* @__PURE__ */ jsx("span", { className: styles$B.message, children: t.message }),
+                t.description && /* @__PURE__ */ jsx("span", { className: styles$B.description, children: t.description })
+              ] }),
+              t.action && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles$B.action,
+                  onClick: () => {
+                    t.action?.onAction();
+                    dismiss(t.id);
+                  },
+                  children: t.action.label
+                }
+              )
+            ]
+          }
+        )
+      ] }, t.id);
     }) })
   ] });
 }
@@ -5894,13 +6102,13 @@ function useLocale(override) {
 }
 const badge$3 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$z = {
+const styles$A = {
   badge: badge$3,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
-  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: [
+  return /* @__PURE__ */ jsxs("span", { className: styles$A.badge, children: [
+    /* @__PURE__ */ jsxs("svg", { className: styles$A.icon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(
         "path",
         {
@@ -5926,7 +6134,7 @@ const lg = "_lg_n3nm5_27";
 const price$1 = "_price_n3nm5_31";
 const compareAt = "_compareAt_n3nm5_36";
 const strikethrough = "_strikethrough_n3nm5_44";
-const styles$y = {
+const styles$z = {
   root: root$3,
   center: center$1,
   end,
@@ -5948,11 +6156,11 @@ 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$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)
+  return /* @__PURE__ */ jsxs("div", { className: [styles$z.root, styles$z[size], styles$z[align], styles$z[variant]].join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: styles$z.price, children: format(price2) }),
+    hasCompare && /* @__PURE__ */ jsxs("span", { className: styles$z.compareAt, children: [
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `Was ${format(compareAt2)}` }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: format(compareAt2) })
     ] }),
     hasCompare && variant === "badge" && pct !== void 0 && /* @__PURE__ */ jsx(SaleBadge, { pct })
   ] });
@@ -6045,23 +6253,23 @@ const SWATCH_HEX = {
 function swatchColour(name) {
   return SWATCH_HEX[name.toLowerCase().trim()] ?? "#c9cdd0";
 }
-const timeline = "_timeline_1j37h_7";
-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$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$1 = "_date_1j37h_128";
-const styles$x = {
+const timeline = "_timeline_1cum7_7";
+const row$7 = "_row_1cum7_15";
+const line$2 = "_line_1cum7_20";
+const marker = "_marker_1cum7_27";
+const tick = "_tick_1cum7_35";
+const pending$2 = "_pending_1cum7_44";
+const connector = "_connector_1cum7_68";
+const text$3 = "_text_1cum7_84";
+const label$1 = "_label_1cum7_101";
+const past = "_past_1cum7_113";
+const current = "_current_1cum7_118";
+const future = "_future_1cum7_133";
+const date$1 = "_date_1cum7_138";
+const styles$y = {
   timeline,
   row: row$7,
-  line: line$1,
+  line: line$2,
   marker,
   tick,
   pending: pending$2,
@@ -6076,22 +6284,22 @@ const styles$x = {
 function OrderTimeline({ progress: progress2, locale: localeProp }) {
   const locale = useLocale(localeProp);
   const currentIndex = progress2.findIndex((e) => e.current);
-  return /* @__PURE__ */ jsx("ol", { className: styles$x.timeline, children: progress2.map((entry, i) => {
+  return /* @__PURE__ */ jsx("ol", { className: styles$y.timeline, children: progress2.map((entry, i) => {
     const state = stateOf(entry, i, currentIndex);
     return /* @__PURE__ */ jsxs(
       "li",
       {
-        className: styles$x.row,
+        className: styles$y.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [
-          /* @__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) })
+          /* @__PURE__ */ jsxs("div", { className: styles$y.line, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$y.marker, children: state === "future" ? /* @__PURE__ */ jsx("span", { className: styles$y.pending, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(StepTick, { tone: state }) }),
+            /* @__PURE__ */ jsxs("span", { className: styles$y.text, children: [
+              /* @__PURE__ */ jsx("span", { className: [styles$y.label, styles$y[state]].join(" "), children: entry.label }),
+              entry.at && /* @__PURE__ */ jsx("time", { className: styles$y.date, dateTime: entry.at, children: formatStepDate(entry.at, locale) })
             ] })
           ] }),
-          i < progress2.length - 1 && /* @__PURE__ */ jsx("span", { className: styles$x.connector, "aria-hidden": "true" })
+          i < progress2.length - 1 && /* @__PURE__ */ jsx("span", { className: styles$y.connector, "aria-hidden": "true" })
         ]
       },
       entry.step
@@ -6107,7 +6315,7 @@ function StepTick({ tone }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: styles$x.tick,
+      className: styles$y.tick,
       width: "28",
       height: "28",
       viewBox: "0 0 28 28",
@@ -6140,15 +6348,17 @@ function formatStepDate(iso, locale) {
   const dayMonth = date2.toLocaleDateString(locale, { day: "numeric", month: "short" });
   return `${weekday}, ${dayMonth}`;
 }
-const summary = "_summary_1h18y_2";
-const row$6 = "_row_1h18y_8";
-const free = "_free_1h18y_36";
-const pending$1 = "_pending_1h18y_42";
-const styles$w = {
+const summary = "_summary_1hsxt_2";
+const row$6 = "_row_1hsxt_16";
+const free = "_free_1hsxt_53";
+const pending$1 = "_pending_1hsxt_59";
+const discount = "_discount_1hsxt_69";
+const styles$x = {
   summary,
   row: row$6,
   free,
-  pending: pending$1
+  pending: pending$1,
+  discount
 };
 const CART_ROWS = [
   { label: "Subtotal", key: "subtotal" },
@@ -6160,49 +6370,56 @@ function OrderSummary({
   pricing,
   deferred = [],
   hidden = [],
-  rows = CART_ROWS
+  rows = CART_ROWS,
+  discount: discount2
 }) {
   const { format } = useMoney();
   const isDeferred = (key) => deferred.includes(key);
   const anyDeferred = deferred.length > 0;
-  const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "total" || !anyDeferred);
-  return /* @__PURE__ */ jsx("dl", { className: styles$w.summary, children: visible.map(({ label: label2, key }) => {
+  const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "total" || !anyDeferred).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
+  return /* @__PURE__ */ jsx("dl", { className: styles$x.summary, children: visible.map(({ label: label2, key }) => {
+    if (key === "discount" && discount2) {
+      return /* @__PURE__ */ jsxs("div", { className: [styles$x.row, styles$x.discount].join(" "), children: [
+        /* @__PURE__ */ jsx("dt", { children: label2 }),
+        /* @__PURE__ */ jsx("dd", { children: `−${format(discount2)}` })
+      ] }, key);
+    }
     const pending2 = key !== "total" && isDeferred(key);
-    return /* @__PURE__ */ jsxs("div", { className: styles$w.row, children: [
+    return /* @__PURE__ */ jsxs("div", { className: styles$x.row, children: [
       /* @__PURE__ */ jsx("dt", { children: label2 }),
-      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$w.pending : void 0, children: pending2 ? "Calculated at checkout" : renderValue(key, pricing, format) })
+      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$x.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$w.free, children: "Free" });
+    return /* @__PURE__ */ jsx("span", { className: styles$x.free, children: "Free" });
   }
-  return format(pricing[key]);
+  return key === "discount" ? null : format(pricing[key]);
 }
-const page$2 = "_page_1eqkm_1";
+const page$3 = "_page_1eqkm_1";
 const status = "_status_1eqkm_10";
 const widget = "_widget_1eqkm_18";
-const title$f = "_title_1eqkm_24";
-const headline = "_headline_1eqkm_30";
-const subtitle$3 = "_subtitle_1eqkm_37";
+const title$h = "_title_1eqkm_24";
+const headline$1 = "_headline_1eqkm_30";
+const subtitle$4 = "_subtitle_1eqkm_37";
 const dot$3 = "_dot_1eqkm_48";
 const trackButton = "_trackButton_1eqkm_58";
 const srOnly = "_srOnly_1eqkm_78";
 const itemsCard = "_itemsCard_1eqkm_92";
 const cardHeader = "_cardHeader_1eqkm_100";
-const cardTitle = "_cardTitle_1eqkm_108";
+const cardTitle$1 = "_cardTitle_1eqkm_108";
 const count$1 = "_count_1eqkm_115";
-const lines$1 = "_lines_1eqkm_130";
-const line = "_line_1eqkm_130";
-const thumb = "_thumb_1eqkm_152";
-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";
+const lines$2 = "_lines_1eqkm_130";
+const line$1 = "_line_1eqkm_130";
+const thumb$1 = "_thumb_1eqkm_152";
+const image$9 = "_image_1eqkm_162";
+const placeholder$6 = "_placeholder_1eqkm_166";
+const lineBody$1 = "_lineBody_1eqkm_172";
+const lineText$1 = "_lineText_1eqkm_180";
+const lineTitle$1 = "_lineTitle_1eqkm_189";
 const lineDetails = "_lineDetails_1eqkm_197";
-const linePrice = "_linePrice_1eqkm_205";
+const linePrice$1 = "_linePrice_1eqkm_205";
 const details$1 = "_details_1eqkm_215";
 const detailBlock = "_detailBlock_1eqkm_228";
 const payment = "_payment_1eqkm_235";
@@ -6211,31 +6428,31 @@ const detailValue = "_detailValue_1eqkm_245";
 const last4 = "_last4_1eqkm_256";
 const brand = "_brand_1eqkm_262";
 const divider$2 = "_divider_1eqkm_268";
-const summaryCard = "_summaryCard_1eqkm_275";
-const styles$v = {
-  page: page$2,
+const summaryCard$1 = "_summaryCard_1eqkm_275";
+const styles$w = {
+  page: page$3,
   status,
   widget,
-  title: title$f,
-  headline,
-  subtitle: subtitle$3,
+  title: title$h,
+  headline: headline$1,
+  subtitle: subtitle$4,
   dot: dot$3,
   trackButton,
   srOnly,
   itemsCard,
   cardHeader,
-  cardTitle,
+  cardTitle: cardTitle$1,
   count: count$1,
-  lines: lines$1,
-  line,
-  thumb,
-  image: image$8,
-  placeholder: placeholder$5,
-  lineBody,
-  lineText,
-  lineTitle,
+  lines: lines$2,
+  line: line$1,
+  thumb: thumb$1,
+  image: image$9,
+  placeholder: placeholder$6,
+  lineBody: lineBody$1,
+  lineText: lineText$1,
+  lineTitle: lineTitle$1,
   lineDetails,
-  linePrice,
+  linePrice: linePrice$1,
   details: details$1,
   detailBlock,
   payment,
@@ -6244,9 +6461,9 @@ const styles$v = {
   last4,
   brand,
   divider: divider$2,
-  summaryCard
+  summaryCard: summaryCard$1
 };
-const SUMMARY_ROWS = [
+const SUMMARY_ROWS$1 = [
   { label: "Subtotal", key: "subtotal" },
   { label: "Tax", key: "tax" },
   { label: "Shipping", key: "shipping" },
@@ -6275,7 +6492,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
     void load();
   }, [load]);
   if (state === "loading") {
-    return /* @__PURE__ */ jsxs("div", { className: styles$v.page, children: [
+    return /* @__PURE__ */ jsxs("div", { className: styles$w.page, children: [
       /* @__PURE__ */ jsx(Skeleton, { height: 120, radius: 8 }),
       /* @__PURE__ */ jsx(Skeleton, { height: 220, radius: 18 }),
       /* @__PURE__ */ jsx(Skeleton, { height: 140, radius: 18 })
@@ -6284,56 +6501,46 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
   if (state === "error" || !order) {
     return /* @__PURE__ */ jsx(ErrorState, { code: errorCode, onRetry: () => void load() });
   }
-  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$1(order.order_ref)
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: styles$v.dot, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Placed ",
-            formatPlaced$1(order.placed_at, locale)
-          ] })
+  return /* @__PURE__ */ jsxs("div", { className: styles$w.page, children: [
+    /* @__PURE__ */ jsxs("section", { className: styles$w.status, "aria-label": "Delivery status", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$w.title, children: [
+        /* @__PURE__ */ jsx("h1", { className: styles$w.headline, children: order.headline }),
+        /* @__PURE__ */ jsxs("p", { className: styles$w.subtitle, children: [
+          /* @__PURE__ */ jsx("span", { children: `Order #${shortRef$1(order.order_ref)}` }),
+          /* @__PURE__ */ jsx("span", { className: styles$w.dot, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: `Placed ${formatPlaced$1(order.placed_at, locale)}` })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles$v.widget, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$w.widget, children: [
         /* @__PURE__ */ jsx(OrderTimeline, { progress: order.progress, locale }),
         order.tracking?.url && /* @__PURE__ */ jsxs(
           "a",
           {
-            className: styles$v.trackButton,
+            className: styles$w.trackButton,
             href: order.tracking.url,
             target: "_blank",
             rel: "noopener noreferrer",
             children: [
               "Track order",
-              /* @__PURE__ */ jsxs("span", { className: styles$v.srOnly, children: [
-                " (opens ",
-                order.tracking.carrier,
-                " in a new tab)"
-              ] })
+              /* @__PURE__ */ jsx("span", { className: styles$w.srOnly, children: ` (opens ${order.tracking.carrier} in a new tab)` })
             ]
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsx(ItemsCard, { order }),
-    /* @__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) })
+    /* @__PURE__ */ jsxs("section", { className: styles$w.details, "aria-label": "Delivery and payment", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$w.detailBlock, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles$w.detailLabel, children: "Shipping address" }),
+        /* @__PURE__ */ jsx("p", { className: styles$w.detailValue, children: formatAddress$1(order.ship_to) })
       ] }),
       order.payment && /* @__PURE__ */ jsxs(Fragment, { 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: [
+        /* @__PURE__ */ jsx("div", { className: styles$w.divider, role: "presentation" }),
+        /* @__PURE__ */ jsxs("div", { className: [styles$w.detailBlock, styles$w.payment].join(" "), children: [
+          /* @__PURE__ */ jsx("h2", { className: styles$w.detailLabel, children: "Payment" }),
+          /* @__PURE__ */ jsxs("p", { className: styles$w.detailValue, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$w.brand, children: order.payment.brand }),
+            order.payment.last4 && /* @__PURE__ */ jsxs("span", { className: styles$w.last4, children: [
               "•••• ",
               order.payment.last4
             ] })
@@ -6341,36 +6548,36 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
         ] })
       ] })
     ] }),
-    /* @__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 })
+    /* @__PURE__ */ jsxs("section", { className: styles$w.summaryCard, "aria-label": "Order summary", children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$w.cardTitle, children: "Order summary" }),
+      /* @__PURE__ */ jsx(OrderSummary, { pricing: toPricing$1(order), rows: SUMMARY_ROWS$1 })
     ] })
   ] });
 }
 function ItemsCard({ order }) {
   const { format } = useMoney();
-  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) })
+  return /* @__PURE__ */ jsxs("section", { className: styles$w.itemsCard, "aria-label": "Items", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$w.cardHeader, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$w.cardTitle, children: "Items" }),
+      /* @__PURE__ */ jsx("span", { className: styles$w.count, children: order.items.reduce((n, i) => n + i.qty, 0) })
     ] }),
-    /* @__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("ul", { className: styles$w.lines, children: order.items.map((item2) => /* @__PURE__ */ jsxs("li", { className: styles$w.line, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$w.thumb, children: item2.image ? /* @__PURE__ */ jsx(ShopImage, { src: item2.image, alt: "", fill: true, sizes: "48px", className: styles$w.image }) : /* @__PURE__ */ jsx("div", { className: styles$w.placeholder, "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles$w.lineBody, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$w.lineText, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$w.lineTitle, children: item2.title ?? item2.sku }),
+          detailsOf$1(item2).length > 0 && /* @__PURE__ */ jsx("span", { className: styles$w.lineDetails, children: detailsOf$1(item2).map((detail2) => /* @__PURE__ */ jsx("span", { children: detail2 }, detail2)) })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: styles$v.linePrice, children: format(item2.line_total) })
+        /* @__PURE__ */ jsx("span", { className: styles$w.linePrice, children: format(item2.line_total) })
       ] })
     ] }, item2.line_ref)) })
   ] });
 }
-function detailsOf(item2) {
+function detailsOf$1(item2) {
   const pairs = variantPairs(item2.attributes).map((p) => `${p.label}: ${p.value}`);
   return item2.qty > 1 ? [...pairs, `Qty: ${item2.qty}`] : pairs;
 }
-function toPricing(order) {
+function toPricing$1(order) {
   return {
     subtotal: order.totals.items,
     shipping: order.totals.shipping,
@@ -6388,6 +6595,164 @@ function formatPlaced$1(iso, locale) {
     year: "numeric"
   });
 }
+function formatAddress$1(address) {
+  return [address.line1, address.line2, address.postcode, address.city, address.country].filter(Boolean).join(", ");
+}
+const page$2 = "_page_8yxu9_6";
+const confirmed = "_confirmed_8yxu9_16";
+const title$g = "_title_8yxu9_22";
+const headline = "_headline_8yxu9_47";
+const subtitle$3 = "_subtitle_8yxu9_65";
+const lines$1 = "_lines_8yxu9_88";
+const line = "_line_8yxu9_88";
+const thumb = "_thumb_8yxu9_103";
+const image$8 = "_image_8yxu9_113";
+const placeholder$5 = "_placeholder_8yxu9_117";
+const lineBody = "_lineBody_8yxu9_122";
+const lineText = "_lineText_8yxu9_131";
+const lineTitle = "_lineTitle_8yxu9_141";
+const lineMeta = "_lineMeta_8yxu9_160";
+const linePrice = "_linePrice_8yxu9_175";
+const paid = "_paid_8yxu9_187";
+const was$1 = "_was_8yxu9_193";
+const card$2 = "_card_8yxu9_213";
+const cardTitle = "_cardTitle_8yxu9_221";
+const cardBody = "_cardBody_8yxu9_233";
+const summaryCard = "_summaryCard_8yxu9_205";
+const done = "_done_8yxu9_261";
+const styles$v = {
+  page: page$2,
+  confirmed,
+  title: title$g,
+  headline,
+  subtitle: subtitle$3,
+  lines: lines$1,
+  line,
+  thumb,
+  image: image$8,
+  placeholder: placeholder$5,
+  lineBody,
+  lineText,
+  lineTitle,
+  lineMeta,
+  linePrice,
+  paid,
+  was: was$1,
+  card: card$2,
+  cardTitle,
+  cardBody,
+  summaryCard,
+  done
+};
+const SUMMARY_ROWS = [
+  { label: "Subtotal", key: "subtotal" },
+  { label: "Discount", key: "discount" },
+  { label: "Shipping", key: "shipping" },
+  { label: "Total", key: "total" }
+];
+function OrderConfirmationView(props) {
+  return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
+}
+function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
+  const { api } = useShop();
+  const locale = useLocale(localeProp);
+  const [order, setOrder] = useState(null);
+  const [state, setState] = useState("loading");
+  const [errorCode, setErrorCode] = useState(void 0);
+  const load = useCallback(async () => {
+    setState("loading");
+    try {
+      setOrder(await api.orders.get(orderRef));
+      setState("ready");
+    } catch (err) {
+      setErrorCode(codeOf(err));
+      setState("error");
+    }
+  }, [api, orderRef]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  if (state === "loading") {
+    return /* @__PURE__ */ jsxs("div", { className: styles$v.page, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 140, radius: 8 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 72, radius: 8 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 120, radius: 18 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 240, radius: 18 })
+    ] });
+  }
+  if (state === "error" || !order) {
+    return /* @__PURE__ */ jsx(ErrorState, { code: errorCode, onRetry: () => void load() });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles$v.page, children: [
+    /* @__PURE__ */ jsxs("section", { className: styles$v.confirmed, "aria-label": "Order confirmation", children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$v.title, children: [
+        /* @__PURE__ */ jsx("h1", { className: styles$v.headline, children: "Your order is confirmed" }),
+        order.email && /* @__PURE__ */ jsx("p", { className: styles$v.subtitle, children: `We’ve sent a confirmation to ${order.email}` })
+      ] }),
+      /* @__PURE__ */ jsx(OrderTimeline, { progress: order.progress, locale })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: styles$v.lines, "aria-label": "Items", children: order.items.map((item2) => /* @__PURE__ */ jsx(ConfirmationLine, { item: item2 }, item2.line_ref)) }),
+    /* @__PURE__ */ jsxs("section", { className: styles$v.card, "aria-label": "Shipping address", children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$v.cardTitle, children: "Shipping address" }),
+      /* @__PURE__ */ jsx("p", { className: styles$v.cardBody, children: formatAddress(order.ship_to) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: [styles$v.card, styles$v.summaryCard].join(" "), "aria-label": "Order summary", children: [
+      /* @__PURE__ */ jsx("h2", { className: styles$v.cardTitle, children: "Order summary" }),
+      /* @__PURE__ */ jsx(
+        OrderSummary,
+        {
+          pricing: toPricing(order),
+          rows: rowsFor(order),
+          discount: order.totals.discount
+        }
+      )
+    ] }),
+    onDone && /* @__PURE__ */ jsx(Button, { variant: "secondary", fullWidth: true, className: styles$v.done, onClick: onDone, children: "Done" })
+  ] });
+}
+function ConfirmationLine({ item: item2 }) {
+  const { format } = useMoney();
+  const compareAt2 = item2.compare_at_unit_price;
+  const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
+  const details2 = detailsOf(item2);
+  return /* @__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 }),
+        /* @__PURE__ */ jsxs("span", { className: styles$v.lineMeta, children: [
+          details2.map((detail2) => /* @__PURE__ */ jsx("span", { children: detail2 }, detail2)),
+          pct !== void 0 && /* @__PURE__ */ jsx(SaleBadge, { pct })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: styles$v.linePrice, children: [
+        /* @__PURE__ */ jsx("span", { className: styles$v.paid, children: format(item2.line_total) }),
+        compareAt2 && /* @__PURE__ */ jsxs("span", { className: styles$v.was, children: [
+          /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `Was ${format(compareAt2)}` }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: format(compareAt2) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function detailsOf(item2) {
+  const pairs = variantPairs(item2.attributes).map((p) => `${p.label}: ${p.value}`);
+  return item2.qty > 1 ? [...pairs, `Qty: ${item2.qty}`] : pairs;
+}
+function rowsFor(order) {
+  if (order.totals.tax.amount === 0) return SUMMARY_ROWS;
+  return SUMMARY_ROWS.flatMap(
+    (row2) => row2.key === "shipping" ? [row2, { label: "Tax", key: "tax" }] : [row2]
+  );
+}
+function toPricing(order) {
+  return {
+    subtotal: order.totals.items,
+    shipping: order.totals.shipping,
+    tax: order.totals.tax,
+    total: order.totals.grand_total
+  };
+}
 function formatAddress(address) {
   return [address.line1, address.line2, address.postcode, address.city, address.country].filter(Boolean).join(", ");
 }
@@ -6427,7 +6792,7 @@ 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 title$f = "_title_y686q_86";
 const date = "_date_y686q_97";
 const bottom$1 = "_bottom_y686q_102";
 const strip = "_strip_y686q_110";
@@ -6444,7 +6809,7 @@ const styles$t = {
   tappable,
   head: head$1,
   heading,
-  title: title$e,
+  title: title$f,
   date,
   bottom: bottom$1,
   strip,
@@ -6529,10 +6894,7 @@ function OrderCard({
   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.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 })
@@ -6570,11 +6932,7 @@ function Thumbnails({ order }) {
           "+",
           overflow
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
-          "and ",
-          overflow,
-          " more items"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `and ${overflow} more items` })
       ] })
     ] }, `${src}-${i}`);
   }) });
@@ -6596,7 +6954,7 @@ 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$d = "_title_1u9l8_1";
+const title$e = "_title_1u9l8_1";
 const swatches = "_swatches_1u9l8_119";
 const swatch = "_swatch_1u9l8_119";
 const swatchActive = "_swatchActive_1u9l8_132";
@@ -6612,7 +6970,7 @@ const styles$s = {
   oos: oos$2,
   bottom,
   titlePrice: titlePrice$1,
-  title: title$d,
+  title: title$e,
   swatches,
   swatch,
   swatchActive,
@@ -6777,7 +7135,7 @@ function ProductGrid({
 }
 const rail = "_rail_5z5e9_2";
 const header$6 = "_header_5z5e9_9";
-const title$c = "_title_5z5e9_16";
+const title$d = "_title_5z5e9_16";
 const seeAll = "_seeAll_5z5e9_22";
 const track$3 = "_track_5z5e9_28";
 const item = "_item_5z5e9_45";
@@ -6785,7 +7143,7 @@ const inset = "_inset_5z5e9_57";
 const styles$p = {
   rail,
   header: header$6,
-  title: title$c,
+  title: title$d,
   seeAll,
   track: track$3,
   item,
@@ -6852,7 +7210,7 @@ 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 title$c = "_title_s4eai_67";
 const close$2 = "_close_s4eai_71";
 const body$3 = "_body_s4eai_84";
 const footer = "_footer_s4eai_90";
@@ -6863,7 +7221,7 @@ const styles$o = {
   grabArea,
   grabber: grabber$1,
   header: header$5,
-  title: title$b,
+  title: title$c,
   close: close$2,
   body: body$3,
   footer
@@ -7043,7 +7401,7 @@ const oos$1 = "_oos_1xbbn_45";
 const info$1 = "_info_1xbbn_58";
 const head = "_head_1xbbn_66";
 const meta = "_meta_1xbbn_73";
-const title$a = "_title_1xbbn_80";
+const title$b = "_title_1xbbn_80";
 const details = "_details_1xbbn_92";
 const detail = "_detail_1xbbn_92";
 const price = "_price_1xbbn_106";
@@ -7060,7 +7418,7 @@ const styles$m = {
   info: info$1,
   head,
   meta,
-  title: title$a,
+  title: title$b,
   details,
   detail,
   price,
@@ -7170,15 +7528,15 @@ function ShippingInfo() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("p", { className: styles$l.label, children: "30 days returns" })
+      /* @__PURE__ */ jsx("p", { className: styles$l.label, children: "14 days returns" })
     ] })
   ] });
 }
-const bar = "_bar_1aly7_1";
-const floating$1 = "_floating_1aly7_16";
-const divider = "_divider_1aly7_22";
-const info = "_info_1aly7_26";
-const actions = "_actions_1aly7_33";
+const bar = "_bar_xqpxa_1";
+const floating$1 = "_floating_xqpxa_31";
+const divider = "_divider_xqpxa_37";
+const info = "_info_xqpxa_41";
+const actions = "_actions_xqpxa_49";
 const styles$k = {
   bar,
   floating: floating$1,
@@ -7498,7 +7856,7 @@ const scrim$3 = "_scrim_8wz6r_6";
 const sheet$1 = "_sheet_8wz6r_17";
 const grabber = "_grabber_8wz6r_29";
 const header$4 = "_header_8wz6r_37";
-const title$9 = "_title_8wz6r_45";
+const title$a = "_title_8wz6r_45";
 const close$1 = "_close_8wz6r_51";
 const tableWrap = "_tableWrap_8wz6r_71";
 const table = "_table_8wz6r_71";
@@ -7508,7 +7866,7 @@ const styles$h = {
   sheet: sheet$1,
   grabber,
   header: header$4,
-  title: title$9,
+  title: title$a,
   close: close$1,
   tableWrap,
   table,
@@ -7573,7 +7931,7 @@ function SizeGuideSheet({ guide, onClose }) {
 }
 const root$2 = "_root_9zj90_1";
 const header$3 = "_header_9zj90_7";
-const title$8 = "_title_9zj90_12";
+const title$9 = "_title_9zj90_12";
 const chips = "_chips_9zj90_20";
 const chip = "_chip_9zj90_20";
 const selected$2 = "_selected_9zj90_44";
@@ -7584,7 +7942,7 @@ const chevron$2 = "_chevron_9zj90_85";
 const styles$g = {
   root: root$2,
   header: header$3,
-  title: title$8,
+  title: title$9,
   chips,
   chip,
   selected: selected$2,
@@ -7664,7 +8022,7 @@ function SizeSelector({
 }
 const root$1 = "_root_1j4n8_1";
 const header$2 = "_header_1j4n8_7";
-const title$7 = "_title_1j4n8_14";
+const title$8 = "_title_1j4n8_14";
 const value = "_value_1j4n8_19";
 const tiles = "_tiles_1j4n8_24";
 const tile = "_tile_1j4n8_24";
@@ -7677,7 +8035,7 @@ const stockBadge = "_stockBadge_1j4n8_91";
 const styles$f = {
   root: root$1,
   header: header$2,
-  title: title$7,
+  title: title$8,
   value,
   tiles,
   tile,
@@ -7713,10 +8071,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
               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$f.stockBadge, "aria-hidden": "true", children: [
-              c.remaining,
-              " left"
-            ] })
+            lowStock && /* @__PURE__ */ jsx("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: `${c.remaining} left` })
           ]
         },
         c.value
@@ -7782,7 +8137,7 @@ function VariantSelector({
 }
 const root = "_root_t4qba_2";
 const group = "_group_t4qba_8";
-const title$6 = "_title_t4qba_14";
+const title$7 = "_title_t4qba_14";
 const body$1 = "_body_t4qba_22";
 const paragraph = "_paragraph_t4qba_26";
 const clamped = "_clamped_t4qba_46";
@@ -7790,7 +8145,7 @@ const toggle = "_toggle_t4qba_51";
 const styles$d = {
   root,
   group,
-  title: title$6,
+  title: title$7,
   body: body$1,
   paragraph,
   clamped,
@@ -7880,7 +8235,7 @@ const content = "_content_1hv16_14";
 const intro = "_intro_1hv16_21";
 const productInfo = "_productInfo_1hv16_28";
 const titlePrice = "_titlePrice_1hv16_34";
-const title$5 = "_title_1hv16_34";
+const title$6 = "_title_1hv16_34";
 const availability = "_availability_1hv16_55";
 const low = "_low_1hv16_62";
 const oos = "_oos_1hv16_66";
@@ -7890,7 +8245,7 @@ const styles$a = {
   intro,
   productInfo,
   titlePrice,
-  title: title$5,
+  title: title$6,
   availability,
   low,
   oos
@@ -7926,6 +8281,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const [busy, setBusy] = useState(null);
   const [sizeError, setSizeError] = useState(false);
   const [reminded, setReminded] = useState([]);
+  const [added, setAdded] = useState([]);
   const sizeRef = useRef(null);
   const colourRef = useRef(null);
   const selectedSku = structured ? resolveSku(variants, selectedSize, selectedColour) : hasVariants ? genericSku : product.sku;
@@ -7950,15 +8306,15 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     if (!selectedSku) return false;
     try {
       const cart2 = await api.cart.addItem({ sku: selectedSku, qty: 1 });
-      const added = variants.find((v) => v.sku === selectedSku);
+      const added2 = variants.find((v) => v.sku === selectedSku);
       emit({
         type: "add_to_cart",
         sku: selectedSku,
         qty: 1,
         title: product.title,
-        size: added?.attributes.size ?? selectedSize ?? void 0,
-        attributes: added?.attributes,
-        image: added?.image ?? product.media[0]
+        size: added2?.attributes.size ?? selectedSize ?? void 0,
+        attributes: added2?.attributes,
+        image: added2?.image ?? product.media[0]
       });
       emit({
         type: "cart_updated",
@@ -8015,24 +8371,61 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   }
   async function handleAdd() {
     if (!ensureSelection()) return;
+    const sku = selectedSku;
+    if (!sku) return;
     setBusy("add");
     const ok = await add();
     setBusy(null);
     if (!ok) return;
-    const added = variants.find((v) => v.sku === selectedSku);
-    const size = added?.attributes.size ?? selectedSize;
+    const variant = variants.find((v) => v.sku === sku);
+    const size = variant?.attributes.size ?? selectedSize;
+    setAdded((current2) => current2.includes(sku) ? current2 : [...current2, sku]);
     toast2.show("Added to cart", {
       description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
-      image: added?.image ?? product.media[0],
+      image: variant?.image ?? product.media[0],
       // Falls back to the /cart route where the sheet provider isn't mounted.
-      action: cartSheet || navigate ? { label: "View cart", onAction: openCart } : void 0
+      action: cartSheet || navigate ? { label: "View cart", onAction: openCart } : void 0,
+      // Points the caret at the cart icon this just landed in.
+      anchor: "cart"
     });
   }
+  const inCart = selectedSku !== null && added.includes(selectedSku);
   const selectedVariant = hasVariants ? variants.find((v) => v.sku === selectedSku) : void 0;
   const available = selectedVariant?.available ?? inventory2?.available ?? 0;
   const lowStock = available > 0 && available <= 5;
   const stockNotice = !purchasable || lowStock;
   const availabilityLabel = !purchasable ? "Out of stock" : lowStock ? `Only ${available} left` : "";
+  const cta2 = purchasable ? (
+    /*
+     * Three labels, one button (5241:71382 / 5295:75115 / 5268:72907). "Adding to cart"
+     * is the wait, and "Go to cart" is what the button becomes once the thing is in
+     * there — it stays that way after the toast has gone, so the confirmation is not the
+     * only trace of what happened.
+     *
+     * The added state changes what the button DOES, not just what it says. A second
+     * press would otherwise add a second one, which is not what a fan reading "Go to
+     * cart" is agreeing to.
+     */
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: inCart ? openCart : handleAdd,
+        loading: busy === "add",
+        disabled: busy !== null,
+        children: busy === "add" ? "Adding to cart" : inCart ? "Go to cart" : "Add to cart"
+      }
+    )
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "primary",
+      onClick: handleRemind,
+      loading: busy === "remind",
+      disabled: alerted || busy !== null,
+      children: alerted ? "We'll remind you" : "Remind me when available"
+    }
+  );
   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$a.content, children: [
@@ -8063,7 +8456,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
           children: availabilityLabel
         }
       ),
-      product.description && /* @__PURE__ */ jsx(ProductDetails, { description: product.description }),
+      hasColours && /* @__PURE__ */ jsx("div", { ref: colourRef, children: /* @__PURE__ */ jsx(
+        ColorSelector,
+        {
+          colours,
+          selected: selectedColour,
+          onSelect: setSelectedColour
+        }
+      ) }),
       hasSizes && /* @__PURE__ */ jsx("div", { ref: sizeRef, children: /* @__PURE__ */ jsx(
         SizeSelector,
         {
@@ -8074,59 +8474,34 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
           guide: product.size_guide
         }
       ) }),
-      hasColours && /* @__PURE__ */ jsx("div", { ref: colourRef, children: /* @__PURE__ */ jsx(
-        ColorSelector,
-        {
-          colours,
-          selected: selectedColour,
-          onSelect: setSelectedColour
-        }
-      ) }),
       hasVariants && !structured && /* @__PURE__ */ jsx(VariantSelector, { variants, selectedSku: genericSku, onSelect: setGenericSku }),
       /* @__PURE__ */ jsx(ShippingInfo, {}),
+      product.description && /* @__PURE__ */ jsx(ProductDetails, { description: product.description }),
       /* @__PURE__ */ jsx(
         RailCarousel,
         {
-          title: "You may like it",
+          title: "You may also like",
           products: recommendations.filter((p) => p.sku !== product.sku),
           inset: true
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(StickyCtaBar, { children: purchasable ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "primary",
-        onClick: handleAdd,
-        loading: busy === "add",
-        disabled: busy !== null,
-        children: "Add to cart"
-      }
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "primary",
-        onClick: handleRemind,
-        loading: busy === "remind",
-        disabled: alerted || busy !== null,
-        children: alerted ? "We'll remind you" : "Remind me when available"
-      }
-    ) })
+    /* @__PURE__ */ jsx(StickyCtaBar, { children: cta2 })
   ] });
 }
-const hero$1 = "_hero_2mcnp_10";
-const image$2 = "_image_2mcnp_37";
-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 hero$1 = "_hero_pi6qp_10";
+const image$2 = "_image_pi6qp_37";
+const scrim$1 = "_scrim_pi6qp_51";
+const text$2 = "_text_pi6qp_57";
+const title$5 = "_title_pi6qp_79";
+const subtitle$2 = "_subtitle_pi6qp_90";
+const noImage = "_noImage_pi6qp_105";
 const styles$9 = {
   hero: hero$1,
   image: image$2,
   scrim: scrim$1,
   text: text$2,
-  title: title$4,
+  title: title$5,
   subtitle: subtitle$2,
   noImage
 };
@@ -8257,12 +8632,12 @@ function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
 }
 const section$1 = "_section_145t0_1";
 const row$2 = "_row_145t0_9";
-const title$3 = "_title_145t0_21";
+const title$4 = "_title_145t0_21";
 const body = "_body_145t0_29";
 const styles$5 = {
   section: section$1,
   row: row$2,
-  title: title$3,
+  title: title$4,
   body
 };
 function WhyUs({ items: items2 }) {
@@ -8272,12 +8647,12 @@ function WhyUs({ items: items2 }) {
   ] }, i)) });
 }
 const section = "_section_opjfc_1";
-const title$2 = "_title_opjfc_8";
+const title$3 = "_title_opjfc_8";
 const list$1 = "_list_opjfc_15";
 const row$1 = "_row_opjfc_26";
 const styles$4 = {
   section,
-  title: title$2,
+  title: title$3,
   list: list$1,
   row: row$1
 };
@@ -8419,24 +8794,24 @@ function ProductView({
   }
   return unavailable;
 }
-const showcase = "_showcase_ems17_30";
-const panel = "_panel_ems17_49";
-const image = "_image_ems17_59";
-const heroImageBox = "_heroImageBox_ems17_79";
-const hero = "_hero_ems17_79";
-const heroContent = "_heroContent_ems17_84";
-const heroText = "_heroText_ems17_95";
-const logo = "_logo_ems17_103";
-const heroTitle = "_heroTitle_ems17_107";
-const heroSub = "_heroSub_ems17_115";
-const swipe = "_swipe_ems17_122";
-const swipeLabel = "_swipeLabel_ems17_131";
-const chevron$1 = "_chevron_ems17_137";
-const overlay$1 = "_overlay_ems17_154";
-const copy = "_copy_ems17_165";
-const title$1 = "_title_ems17_170";
-const subtitle$1 = "_subtitle_ems17_177";
-const cta = "_cta_ems17_183";
+const showcase = "_showcase_1sarz_31";
+const panel = "_panel_1sarz_50";
+const image = "_image_1sarz_60";
+const heroImageBox = "_heroImageBox_1sarz_108";
+const hero = "_hero_1sarz_108";
+const heroContent = "_heroContent_1sarz_179";
+const heroText = "_heroText_1sarz_196";
+const logo = "_logo_1sarz_205";
+const heroTitle = "_heroTitle_1sarz_225";
+const heroSub = "_heroSub_1sarz_249";
+const swipe = "_swipe_1sarz_262";
+const swipeLabel = "_swipeLabel_1sarz_270";
+const chevron$1 = "_chevron_1sarz_276";
+const overlay$1 = "_overlay_1sarz_293";
+const copy = "_copy_1sarz_304";
+const title$2 = "_title_1sarz_309";
+const subtitle$1 = "_subtitle_1sarz_316";
+const cta = "_cta_1sarz_322";
 const styles$2 = {
   showcase,
   panel,
@@ -8453,7 +8828,7 @@ const styles$2 = {
   chevron: chevron$1,
   overlay: overlay$1,
   copy,
-  title: title$1,
+  title: title$2,
   subtitle: subtitle$1,
   cta
 };
@@ -8610,9 +8985,19 @@ function HomeShowcase() {
 function CartTrigger({ className, children, ...rest }) {
   const sheet2 = useCartSheet();
   if (!sheet2) {
-    return /* @__PURE__ */ jsx(ShopLink, { to: "/cart", className, ...rest, children });
+    return /* @__PURE__ */ jsx(ShopLink, { to: "/cart", className, "data-shop-cart-trigger": "", ...rest, children });
   }
-  return /* @__PURE__ */ jsx("button", { type: "button", className, onClick: sheet2.open, ...rest, children });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      "data-shop-cart-trigger": "",
+      onClick: sheet2.open,
+      ...rest,
+      children
+    }
+  );
 }
 function IdentityGate({ returnTo }) {
   const emit = useShopEvent();
@@ -8650,21 +9035,29 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-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 header$1 = "_header_1hcuj_25";
+const floating = "_floating_1hcuj_65";
+const scrolled = "_scrolled_1hcuj_72";
+const title$1 = "_title_1hcuj_121";
+const right = "_right_1hcuj_134";
+const spacer = "_spacer_1hcuj_147";
+const iconBtn = "_iconBtn_1hcuj_152";
+const menuBtn = "_menuBtn_1hcuj_179";
+const badge = "_badge_1hcuj_207";
+const closeSlot = "_closeSlot_1hcuj_234";
+const centred = "_centred_1hcuj_249";
 const styles$1 = {
   header: header$1,
   floating,
+  scrolled,
+  title: title$1,
   right,
   spacer,
   iconBtn,
   menuBtn,
-  badge
+  badge,
+  closeSlot,
+  centred
 };
 function ChevronLeft() {
   return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { transform: "translate(6.48 2.988)", children: /* @__PURE__ */ jsx(
@@ -8700,20 +9093,79 @@ function MenuIcon() {
     }
   ) }) });
 }
-function ShopHeader({
+function useScrolledUnder(enabled) {
+  const [scrolled2, setScrolled] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    const read = (event) => {
+      const target = event?.target;
+      const top = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
+      setScrolled(top > 0);
+    };
+    read();
+    document.addEventListener("scroll", read, { capture: true, passive: true });
+    return () => document.removeEventListener("scroll", read, { capture: true });
+  }, [enabled]);
+  return enabled ? scrolled2 : false;
+}
+function CloseMedium() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("g", { transform: "translate(5.03 5.03)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12.233 0.292847C12.6235 -0.0975851 13.2566 -0.0976464 13.6471 0.292847C14.0375 0.683347 14.0375 1.3164 13.6471 1.70691L8.38437 6.9696L13.6471 12.2323C14.0376 12.6228 14.0376 13.2558 13.6471 13.6464C13.2565 14.0369 12.6235 14.0369 12.233 13.6464L6.96933 8.38367L1.70761 13.6464C1.31711 14.0369 0.684078 14.0368 0.293548 13.6464C-0.0969764 13.2558 -0.0969764 12.6228 0.293548 12.2323L5.55527 6.9696L0.292571 1.70691C-0.0976189 1.31653 -0.0974286 0.683349 0.292571 0.292847C0.683065 -0.0976464 1.31708 -0.0975851 1.70761 0.292847L6.97031 5.55554L12.233 0.292847Z",
+      fill: "currentColor"
+    }
+  ) }) });
+}
+function ShopHeader(props) {
+  return props.context === "checkout" ? /* @__PURE__ */ jsx(CheckoutBar, { ...props }) : /* @__PURE__ */ jsx(ShopBar, { ...props });
+}
+function CheckoutBar({
+  title: title2,
+  onClose,
+  closeLabel = "Close",
+  className
+}) {
+  const classes = [styles$1.header, className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("header", { className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: styles$1.closeSlot, "aria-hidden": "true" }),
+    title2 ? /* @__PURE__ */ jsx("span", { className: [styles$1.title, styles$1.centred].join(" "), children: title2 }) : null,
+    onClose ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: [styles$1.iconBtn, styles$1.closeSlot].join(" "),
+        "aria-label": closeLabel,
+        onClick: onClose,
+        children: /* @__PURE__ */ jsx(CloseMedium, {})
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: styles$1.closeSlot, "aria-hidden": "true" })
+  ] });
+}
+function ShopBar({
   onBack,
   onMenu,
+  title: title2,
   showCart = true,
   floating: floating2 = false,
+  scrolled: scrolled2,
   backLabel = "Back",
   menuLabel = "More options",
   className
 }) {
   const cartCount = useCartCount();
+  const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
+  const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
-  const classes = [styles$1.header, floating2 ? styles$1.floating : "", className ?? ""].filter(Boolean).join(" ");
+  const classes = [
+    styles$1.header,
+    floating2 ? styles$1.floating : "",
+    floating2 && isScrolled ? styles$1.scrolled : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, 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" }),
+    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),
@@ -8732,18 +9184,18 @@ 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 overlay = "_overlay_1i5ok_5";
+const scrim = "_scrim_1i5ok_21";
+const sheet = "_sheet_1i5ok_31";
+const header = "_header_1i5ok_73";
+const close = "_close_1i5ok_79";
+const list = "_list_1i5ok_98";
+const row = "_row_1i5ok_113";
+const icon = "_icon_1i5ok_142";
+const text = "_text_1i5ok_150";
+const title = "_title_1i5ok_158";
+const subtitle = "_subtitle_1i5ok_165";
+const chevron = "_chevron_1i5ok_171";
 const styles = {
   overlay,
   scrim,
@@ -8792,17 +9244,6 @@ function OrderIcon() {
     ) })
   ] });
 }
-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(
@@ -8846,7 +9287,6 @@ function ShopMenuSheet({
   open,
   onClose,
   onManageOrders,
-  onRedeemCode,
   onHelp,
   closeLabel = "Close",
   label: label2 = "Shop menu"
@@ -8862,13 +9302,6 @@ function ShopMenuSheet({
       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, {}),
@@ -8934,6 +9367,7 @@ export {
   LifestyleImage,
   LifestyleText,
   MediaGallery,
+  OrderConfirmationView,
   OrderListView,
   OrderStatusBadge,
   OrderSummary,