@nok-integration/storefront-react 0.18.5 → 0.19.0

package/dist/index.mjs

@@ -5913,8 +5913,228 @@ const styles$L = {
   row: row$9,
   action: action$2
 };
+const MINOR_UNIT_EXPONENT = {
+  JPY: 0,
+  KRW: 0,
+  VND: 0,
+  CLP: 0,
+  ISK: 0,
+  BHD: 3,
+  KWD: 3,
+  OMR: 3,
+  TND: 3,
+  JOD: 3
+};
+function minorUnitExponent(currency) {
+  return MINOR_UNIT_EXPONENT[currency.toUpperCase()] ?? 2;
+}
+function formatMoney(money2, locale) {
+  const exponent = minorUnitExponent(money2.currency);
+  const major = money2.amount / 10 ** exponent;
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: money2.currency
+    }).format(major);
+  } catch {
+    return `${major.toFixed(exponent)} ${money2.currency}`;
+  }
+}
+function discountPct(price2, compareAt2) {
+  if (!compareAt2) return void 0;
+  if (compareAt2.currency !== price2.currency) return void 0;
+  if (compareAt2.amount <= price2.amount) return void 0;
+  const pct = Math.round((compareAt2.amount - price2.amount) / compareAt2.amount * 100);
+  return pct > 0 ? pct : void 0;
+}
+function useMoney(defaultLocale) {
+  const locale = useLocale(defaultLocale);
+  const format = useCallback(
+    (money2, localeOverride) => formatMoney(money2, localeOverride ?? locale),
+    [locale]
+  );
+  return { format };
+}
+function useLocale(override) {
+  const shop = useShopOptional();
+  return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
+}
+const ES = {
+  "(opens {0} in a new tab)": "(abre {0} en una nueva pestaña)",
+  "(out of stock)": "(agotado)",
+  "14 days returns": "Devoluciones en 14 días",
+  "Add something to your basket to carry on.": "Añade algún artículo a tu cesta para continuar.",
+  "Add to cart": "Añadir a la cesta",
+  "All items": "Todos los artículos",
+  "and {0} more items": "y {0} artículos más",
+  "Back": "Atrás",
+  "Calculated at checkout": "Se calculará al finalizar la compra",
+  "Cart": "Cesta",
+  "Cart, empty": "Cesta vacía",
+  "Cart, {0} item{1}": "Cesta, {0} artículo{1}",
+  "Category unavailable": "Categoría no disponible",
+  "Checkout in progress": "Finalización de la compra en curso",
+  "Clear": "Borrar",
+  "Clear filters": "Borrar filtros",
+  "Close": "Cerrar",
+  "Close size guide": "Cerrar la guía de tallas",
+  "Color": "Color",
+  "Color:": "Color:",
+  "Complete the look with everyday essentials and finishing details": "Completa tu look con básicos para el día a día y detalles que marcan la diferencia",
+  "Continue shopping": "Seguir comprando",
+  "DAZN": "DAZN",
+  "DAZN Shop": "Tienda DAZN",
+  "DAZN SHOP": "TIENDA DAZN",
+  "Decrease quantity": "Reducir cantidad",
+  "Delivery": "Envío",
+  "Delivery status": "Estado del envío",
+  "Everyday essentials with sport-inspired fits and minimal branding": "Artículos básicos para el día a día con cortes de inspiración deportiva y logotipos discretos",
+  "Explore": "Explorar",
+  "Filters": "Filtros",
+  "Finish signing up": "Finalizar el registro",
+  "Free": "Gratis",
+  "Fresh drops inspired by sport, culture, and everyday movement": "Novedades inspiradas en el deporte, la cultura y el movimiento diario",
+  "Gallery pagination": "Paginación de la galería",
+  "Go to image {0}": "Ir a la imagen {0}",
+  "Heavyweight comfort built for training days and off-duty moments": "Comodidad y resistencia pensadas para los días de entrenamiento y los momentos de ocio",
+  "Help & Support": "Ayuda y asistencia",
+  "Hoodies": "Sudaderas con capucha",
+  "Increase quantity": "Aumentar la cantidad",
+  "Item unavailable": "Artículo no disponible",
+  "Items": "Artículos",
+  "Jackets": "Chaquetas",
+  "Loading": "Cargando",
+  "Manage orders": "Gestionar pedidos",
+  "More options": "Más opciones",
+  "No products": "Sin productos",
+  "Not available to you": "No disponible para ti",
+  "Nothing here yet": "Aún no hay nada aquí",
+  "One moment": "Un momento",
+  "One or more items just sold out. Adjust your cart to continue.": "Uno o más artículos se han agotado. Ajusta tu carrito para continuar.",
+  "Only {0} left": "Solo quedan {0}",
+  "Order #{0}": "Pedido n.º {0}",
+  "Order already placed": "Pedido ya realizado",
+  "Order not found": "Pedido no encontrado",
+  "Order summary": "Resumen del pedido",
+  "Order {0}, {1}": "Pedido {0}, {1}",
+  "Out of stock": "Agotado",
+  "Placed {0}": "Realizado {0}",
+  "Please check the details and try again.": "Por favor, comprueba los datos e inténtalo de nuevo.",
+  "Please select a size": "Selecciona una talla",
+  "Please try again.": "Inténtalo de nuevo.",
+  "Price updated": "Precio actualizado",
+  "Proceed to checkout": "Pasar por caja",
+  "Product details": "Detalles del producto",
+  "Qty: {0}": "Cantidad: {0}",
+  "Quantity {0}": "Cantidad {0}",
+  "Reconnecting…": "Restableciendo la conexión…",
+  "Redeem a code": "Canjear un código",
+  "Remind me when available": "Avísame cuando esté disponible",
+  "Remove item": "Eliminar artículo",
+  "Restoring your session.": "Restaurando tu sesión.",
+  "Reviews": "Opiniones",
+  "Seasonal": "De temporada",
+  "See all": "Ver todo",
+  "See more": "Ver más",
+  "Select an option": "Selecciona una opción",
+  "Share": "Compartir",
+  "Shipping": "Envío",
+  "Shipping address": "Dirección de envío",
+  "Shipping and returns": "Envíos y devoluciones",
+  "Shop menu": "Menú de la tienda",
+  "Shop now": "Comprar ahora",
+  "Size": "Talla",
+  "Size guide": "Guía de tallas",
+  "Something looks off": "Algo no va bien",
+  "Something went wrong": "Ha surgido un error",
+  "Standard or express delivery": "Envío estándar o urgente",
+  "Subtotal": "Subtotal",
+  "Swipe down for more": "Desliza hacia abajo para ver más",
+  "T-Shirts": "Camisetas",
+  "Tax": "Impuestos",
+  "That is not possible right now": "Eso no es posible en este momento",
+  "The total changed since you started. Review the updated amount and try again.": "El total ha cambiado desde que empezaste. Revisa el importe actualizado e inténtalo de nuevo.",
+  "This category is no longer available.": "Esta categoría ya no está disponible.",
+  "This has already moved on. Refresh to see where it is.": "Esto ya se ha movido. Actualiza la página para ver dónde está.",
+  "This order has already been despatched.": "Este pedido ya se ha enviado.",
+  "This order was already confirmed.": "Este pedido ya se ha confirmado.",
+  "This product is no longer available.": "Este producto ya no está disponible.",
+  "Too late to change this": "Es demasiado tarde para cambiarlo",
+  "Too many requests. Retrying shortly.": "Demasiadas solicitudes. Lo volveremos a intentar en breve.",
+  "Total": "Total",
+  "Try again": "Inténtalo de nuevo",
+  "Undo": "Deshacer",
+  "Variant": "Variante",
+  "View cart": "Ver carrito",
+  "View your order history and track shipments": "Consulta tu historial de pedidos y realiza el seguimiento de los envíos",
+  "Was {0}": "Era {0}",
+  "We could not find that order.": "No hemos podido encontrar ese pedido.",
+  "We hit a snag. Please try again.": "Hemos tenido un problema. Inténtalo de nuevo.",
+  "We'll remind you": "Te lo recordaremos",
+  "Why shop with us": "¿Por qué comprar con nosotros?",
+  "You do not have access to this.": "No tienes acceso a esto.",
+  "You may also like": "Quizá te guste",
+  "Your basket is empty": "Tu cesta está vacía",
+  "Your checkout is still open. Return to it to finish or cancel your order.": "Tu proceso de pago sigue abierto. Vuelve a él para finalizar o cancelar tu pedido.",
+  "{0} images": "{0} imágenes",
+  "{0} left": "{0} restantes",
+  "{0} — image {1} of {2}": "{0} — imagen {1} de {2}",
+  /*
+   * ── Order status badges ──────────────────────────────────────────────────────────
+   *
+   * **These seven are ours, not the translator's.** The workbook carries no row for any of
+   * them: it was extracted from the rendered UAT build, and an order list only renders the
+   * statuses its orders happened to be in that day, so a status nothing was sitting in was
+   * never collected.
+   *
+   * Added on instruction rather than left in English, and grouped here so they can be
+   * reviewed as a set when DAZN's translator next looks at this file. Two of the seven are
+   * anchored in the translator's own vocabulary rather than chosen freely: `en curso` is how
+   * they rendered "Checkout in progress", and `confirmado` is the stem they used for "This
+   * order was already confirmed."
+   *
+   * All seven describe `el pedido`, so they are masculine singular throughout.
+   *
+   * `Preparado` rather than `Empaquetado` for "Packed": the fulfilment vocabulary already
+   * translates that state to a fan as preparing the order, not as boxing it, and the
+   * notification copy says `estamos preparando`. A fan should not meet two different words
+   * for the same moment.
+   */
+  "Confirmed": "Confirmado",
+  "Packed": "Preparado",
+  "Shipped": "Enviado",
+  "Delivered": "Entregado",
+  "Cancelled": "Cancelado",
+  "Refunded": "Reembolsado",
+  "In progress": "En curso"
+};
+const CATALOGUES = { es: ES };
+function catalogueFor(locale) {
+  if (!locale) return null;
+  const tag = locale.toLowerCase();
+  return CATALOGUES[tag] ?? CATALOGUES[tag.split("-")[0]] ?? null;
+}
+function interpolate(template, args) {
+  if (args.length === 0) return template;
+  return template.replace(/\{(\d)\}/g, (whole, digit) => {
+    const value2 = args[Number(digit)];
+    return value2 === void 0 ? whole : String(value2);
+  });
+}
+function translate(locale, source, ...args) {
+  const catalogue = catalogueFor(locale);
+  return interpolate(catalogue?.[source] ?? source, args);
+}
+function useT() {
+  const locale = useLocale();
+  return useCallback(
+    (source, ...args) => translate(locale, source, ...args),
+    [locale]
+  );
+}
 function ScreenSkeleton({ tone, shape = "media" }) {
-  return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$L.root, children: /* @__PURE__ */ jsx("div", { className: styles$L.inner, role: "status", "aria-label": "Loading", children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const t = useT();
+  return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$L.root, children: /* @__PURE__ */ jsx("div", { className: styles$L.inner, role: "status", "aria-label": t("Loading"), children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, { className: styles$L.media }),
     /* @__PURE__ */ jsxs("div", { className: styles$L.lines, children: [
       /* @__PURE__ */ jsx(Skeleton, { height: 22, className: styles$L.lineWide }),
@@ -6110,12 +6330,13 @@ const styles$J = {
   body: body$7
 };
 function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
+  const t = useT();
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return /* @__PURE__ */ jsxs("div", { className: styles$J.root, role: "alert", children: [
-    /* @__PURE__ */ jsx("h2", { className: styles$J.title, children: title2 ?? treatment.title }),
-    /* @__PURE__ */ jsx("p", { className: styles$J.body, children: body3 ?? treatment.body }),
-    showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? "Try again" })
+    /* @__PURE__ */ jsx("h2", { className: styles$J.title, children: title2 ?? t(treatment.title) }),
+    /* @__PURE__ */ jsx("p", { className: styles$J.body, children: body3 ?? t(treatment.body) }),
+    showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? t("Try again") })
   ] });
 }
 const STATUS_LABEL = {
@@ -6135,9 +6356,10 @@ const STATUS_TONE = {
   refunded: "critical"
 };
 function StatusBadge({ status }) {
+  const t = useT();
   const tone = STATUS_TONE[status] ?? "neutral";
   const label2 = STATUS_LABEL[status] ?? status;
-  return /* @__PURE__ */ jsx(Badge, { tone, children: label2 });
+  return /* @__PURE__ */ jsx(Badge, { tone, children: t(label2) });
 }
 const viewport = "_viewport_5aafz_14";
 const anchor = "_anchor_5aafz_41";
@@ -6307,52 +6529,6 @@ function ToastProvider({ children }) {
     }) })
   ] });
 }
-const MINOR_UNIT_EXPONENT = {
-  JPY: 0,
-  KRW: 0,
-  VND: 0,
-  CLP: 0,
-  ISK: 0,
-  BHD: 3,
-  KWD: 3,
-  OMR: 3,
-  TND: 3,
-  JOD: 3
-};
-function minorUnitExponent(currency) {
-  return MINOR_UNIT_EXPONENT[currency.toUpperCase()] ?? 2;
-}
-function formatMoney(money2, locale) {
-  const exponent = minorUnitExponent(money2.currency);
-  const major = money2.amount / 10 ** exponent;
-  try {
-    return new Intl.NumberFormat(locale, {
-      style: "currency",
-      currency: money2.currency
-    }).format(major);
-  } catch {
-    return `${major.toFixed(exponent)} ${money2.currency}`;
-  }
-}
-function discountPct(price2, compareAt2) {
-  if (!compareAt2) return void 0;
-  if (compareAt2.currency !== price2.currency) return void 0;
-  if (compareAt2.amount <= price2.amount) return void 0;
-  const pct = Math.round((compareAt2.amount - price2.amount) / compareAt2.amount * 100);
-  return pct > 0 ? pct : void 0;
-}
-function useMoney(defaultLocale) {
-  const locale = useLocale(defaultLocale);
-  const format = useCallback(
-    (money2, localeOverride) => formatMoney(money2, localeOverride ?? locale),
-    [locale]
-  );
-  return { format };
-}
-function useLocale(override) {
-  const shop = useShopOptional();
-  return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
-}
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
 const styles$H = {
@@ -6649,26 +6825,27 @@ function OrderSummary({
   rows = CART_ROWS,
   discount: discount2
 }) {
+  const t = useT();
   const { format } = useMoney();
   const isDeferred = (key) => deferred.includes(key);
   const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
   return /* @__PURE__ */ jsx("dl", { className: styles$E.summary, children: visible.map(({ label: label2, key }) => {
     if (key === "discount" && discount2) {
       return /* @__PURE__ */ jsxs("div", { className: [styles$E.row, styles$E.discount].join(" "), children: [
-        /* @__PURE__ */ jsx("dt", { children: label2 }),
+        /* @__PURE__ */ jsx("dt", { children: t(label2) }),
         /* @__PURE__ */ jsx("dd", { children: `−${format(discount2)}` })
       ] }, key);
     }
     const pending2 = key !== "total" && isDeferred(key);
     return /* @__PURE__ */ jsxs("div", { className: styles$E.row, children: [
-      /* @__PURE__ */ jsx("dt", { children: label2 }),
-      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$E.pending : void 0, children: pending2 ? "Calculated at checkout" : renderValue(key, pricing, format) })
+      /* @__PURE__ */ jsx("dt", { children: t(label2) }),
+      /* @__PURE__ */ jsx("dd", { className: pending2 ? styles$E.pending : void 0, children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t) })
     ] }, key);
   }) });
 }
-function renderValue(key, pricing, format) {
+function renderValue(key, pricing, format, t) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
-    return /* @__PURE__ */ jsx("span", { className: styles$E.free, children: "Free" });
+    return /* @__PURE__ */ jsx("span", { className: styles$E.free, children: t("Free") });
   }
   return key === "discount" ? null : format(pricing[key]);
 }
@@ -6714,9 +6891,10 @@ const SUMMARY_ROWS = [
 ];
 function OrderLine({ item: item2 }) {
   const { format } = useMoney();
+  const t = useT();
   const compareAt2 = item2.compare_at_unit_price;
   const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
-  const details2 = detailsOf(item2);
+  const details2 = detailsOf(item2, t);
   return /* @__PURE__ */ jsxs("li", { className: styles$D.line, children: [
     /* @__PURE__ */ jsx("div", { className: styles$D.thumb, children: item2.image ? /* @__PURE__ */ jsx(ShopImage, { src: item2.image, alt: "", fill: true, sizes: "48px", className: styles$D.image }) : /* @__PURE__ */ jsx("div", { className: styles$D.placeholder, "aria-hidden": "true" }) }),
     /* @__PURE__ */ jsxs("div", { className: styles$D.lineBody, children: [
@@ -6738,23 +6916,26 @@ function OrderLine({ item: item2 }) {
   ] });
 }
 function OrderLines({ order }) {
-  return /* @__PURE__ */ jsx("ul", { className: styles$D.lines, "aria-label": "Items", children: order.items.map((item2) => /* @__PURE__ */ jsx(OrderLine, { item: item2 }, item2.line_ref)) });
+  const t = useT();
+  return /* @__PURE__ */ jsx("ul", { className: styles$D.lines, "aria-label": t("Items"), children: order.items.map((item2) => /* @__PURE__ */ jsx(OrderLine, { item: item2 }, item2.line_ref)) });
 }
 function ShippingAddressCard({ order }) {
-  return /* @__PURE__ */ jsxs("section", { className: styles$D.card, "aria-label": "Shipping address", children: [
+  const t = useT();
+  return /* @__PURE__ */ jsxs("section", { className: styles$D.card, "aria-label": t("Shipping address"), children: [
     /* @__PURE__ */ jsx("h2", { className: styles$D.cardTitle, children: "Shipping address" }),
     /* @__PURE__ */ jsx("p", { className: styles$D.cardBody, children: formatAddress(order.ship_to) })
   ] });
 }
 function OrderSummaryCard({ order }) {
-  return /* @__PURE__ */ jsxs("section", { className: [styles$D.card, styles$D.summaryCard].join(" "), "aria-label": "Order summary", children: [
+  const t = useT();
+  return /* @__PURE__ */ jsxs("section", { className: [styles$D.card, styles$D.summaryCard].join(" "), "aria-label": t("Order summary"), children: [
     /* @__PURE__ */ jsx("h2", { className: styles$D.cardTitle, children: "Order summary" }),
     /* @__PURE__ */ jsx(OrderSummary, { pricing: toPricing(order), rows: rowsFor(order), discount: order.totals.discount })
   ] });
 }
-function detailsOf(item2) {
-  const pairs = variantPairs(item2.attributes).map((p) => `${p.label}: ${p.value}`);
-  return item2.qty > 1 ? [...pairs, `Qty: ${item2.qty}`] : pairs;
+function detailsOf(item2, t) {
+  const pairs = variantPairs(item2.attributes).map((p) => `${t(p.label)}: ${p.value}`);
+  return item2.qty > 1 ? [...pairs, t("Qty: {0}", item2.qty)] : pairs;
 }
 function rowsFor(order) {
   if (order.totals.tax.amount === 0) return SUMMARY_ROWS;
@@ -7014,6 +7195,7 @@ function OrderTrackingContent({
   onCancelled,
   onReorder
 }) {
+  const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [order, setOrder] = useState(null);
@@ -7057,7 +7239,7 @@ function OrderTrackingContent({
       emit({ type: "order_cancellation_requested", orderRef, reason: reason2 });
       onCancelled?.(updated);
     } catch (err) {
-      setCancelError(treatmentFor(codeOf(err)).body);
+      setCancelError(t(treatmentFor(codeOf(err)).body));
     } finally {
       setCancelling(false);
     }
@@ -7086,7 +7268,7 @@ function OrderTrackingContent({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: styles$A.page, children: [
-    /* @__PURE__ */ jsxs("section", { className: styles$A.widget, "aria-label": "Delivery status", children: [
+    /* @__PURE__ */ jsxs("section", { className: styles$A.widget, "aria-label": t("Delivery status"), children: [
       /* @__PURE__ */ jsxs("div", { className: styles$A.titleRow, children: [
         /* @__PURE__ */ jsx("h1", { className: styles$A.headline, children: `Order #${shortRef$1(order.order_ref)}` }),
         order.tracking?.url && /* @__PURE__ */ jsxs(
@@ -7684,9 +7866,10 @@ const TONE = {
   cancelled: "cancelled"
 };
 function OrderStatusBadge({ status }) {
+  const t = useT();
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "progress";
-  return /* @__PURE__ */ jsx("span", { className: [styles$v.badge, styles$v[tone]].join(" "), children: label2 });
+  return /* @__PURE__ */ jsx("span", { className: [styles$v.badge, styles$v[tone]].join(" "), children: t(label2) });
 }
 const page$1 = "_page_6xodo_2";
 const empty = "_empty_6xodo_22";
@@ -7736,6 +7919,7 @@ function OrderListView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderListContent, { ...props }) });
 }
 function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp }) {
+  const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [orders2, setOrders] = useState([]);
@@ -7769,7 +7953,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
     return /* @__PURE__ */ jsx("div", { className: styles$u.empty, children: /* @__PURE__ */ jsx(
       EmptyState,
       {
-        title: "Nothing here yet",
+        title: t("Nothing here yet"),
         body: "Your orders will show up here once you've shopped.",
         ...onStartShopping ? {
           action: /* @__PURE__ */ jsx("button", { type: "button", className: styles$u.cta, onClick: onStartShopping, children: "Continue shopping" })
@@ -8011,8 +8195,9 @@ const styles$r = {
   clear
 };
 function FilterBar({ options: options2, active, onToggle, onClear }) {
+  const t = useT();
   const hasActive = active.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: styles$r.bar, role: "group", "aria-label": "Filters", children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$r.bar, role: "group", "aria-label": t("Filters"), children: [
     /* @__PURE__ */ jsx("div", { className: styles$r.chips, children: options2.map((opt) => {
       const on2 = active.includes(opt.value);
       return /* @__PURE__ */ jsx(
@@ -8042,6 +8227,7 @@ function ProductGrid({
   initialCursor,
   filters = []
 }) {
+  const t = useT();
   const { api, market, emit } = useShop();
   const [products, setProducts] = useState(initialProducts);
   const [cursor, setCursor] = useState(initialCursor);
@@ -8090,7 +8276,7 @@ function ProductGrid({
     visible.length === 0 ? /* @__PURE__ */ jsx(
       EmptyState,
       {
-        title: "No products",
+        title: t("No products"),
         body: "Nothing matches these filters.",
         action: active.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setActive([]), children: "Clear filters" }) : void 0
       }
@@ -8149,6 +8335,7 @@ const styles$o = {
 };
 const DISMISS_THRESHOLD_PX = 96;
 function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }) {
+  const t = useT();
   const sheetRef = useRef(null);
   const dragStartY = useRef(null);
   const dragDistance = useRef(0);
@@ -8202,7 +8389,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
           ),
           /* @__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(
+            /* @__PURE__ */ jsx("button", { type: "button", className: styles$o.close, onClick: onClose, "aria-label": t("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",
@@ -8223,9 +8410,6 @@ const LOW_STOCK_THRESHOLD = 5;
 function isLowStock(available) {
   return available !== void 0 && available > 0 && available <= LOW_STOCK_THRESHOLD;
 }
-function lowStockLabel(available) {
-  return `Only ${available} left`;
-}
 let idCounter = 0;
 function useStableId(prefix) {
   const [id] = useState(() => `${prefix}-${idCounter += 1}`);
@@ -8283,6 +8467,7 @@ function QtyStepper({
   disabled: disabled2,
   capDescribedBy
 }) {
+  const t = useT();
   const ownCapId = useStableId("qty-cap");
   const atMax = max !== void 0 && qty >= max;
   const capId = capDescribedBy ?? ownCapId;
@@ -8306,7 +8491,7 @@ function QtyStepper({
           className: styles$n.button,
           onClick: decrement,
           disabled: disabled2,
-          "aria-label": willDelete ? "Remove item" : "Decrease quantity",
+          "aria-label": willDelete ? t("Remove item") : t("Decrease quantity"),
           children: willDelete ? /* @__PURE__ */ jsx(TrashIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
         }
       ),
@@ -8318,13 +8503,13 @@ function QtyStepper({
           className: styles$n.button,
           onClick: increment,
           disabled: disabled2 || atMax,
-          "aria-label": "Increase quantity",
+          "aria-label": t("Increase quantity"),
           "aria-describedby": atMax ? capId : void 0,
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    atMax && capDescribedBy === void 0 && /* @__PURE__ */ jsx("span", { id: ownCapId, className: styles$n.cap, role: "status", children: max === 0 ? "Out of stock" : lowStockLabel(max) })
+    atMax && capDescribedBy === void 0 && /* @__PURE__ */ jsx("span", { id: ownCapId, className: styles$n.cap, role: "status", children: max === 0 ? t("Out of stock") : t("Only {0} left", max) })
   ] });
 }
 const line = "_line_1s2s6_6";
@@ -8378,6 +8563,7 @@ function CartLineItem({
   onRemove,
   pending: pending2
 }) {
+  const t = useT();
   const { format } = useMoney();
   const displayTitle = title2 ?? item2.title ?? item2.sku;
   const displayImage = image2 ?? item2.image;
@@ -8399,7 +8585,7 @@ function CartLineItem({
           /* @__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,
+              t(label2),
               ": ",
               value2
             ] }, key)) })
@@ -8422,7 +8608,7 @@ function CartLineItem({
         )
       ] })
     ] }),
-    lowStock2 && /* @__PURE__ */ jsx("div", { className: styles$m.labels, children: /* @__PURE__ */ jsx("span", { id: noticeId, className: styles$m.lowStock, role: "status", children: lowStockLabel(available) }) })
+    lowStock2 && /* @__PURE__ */ jsx("div", { className: styles$m.labels, children: /* @__PURE__ */ jsx("span", { id: noticeId, className: styles$m.lowStock, role: "status", children: t("Only {0} left", available) }) })
   ] });
 }
 const box$1 = "_box_1cf1a_1";
@@ -8438,7 +8624,8 @@ const styles$l = {
   divider: divider$1
 };
 function ShippingInfo() {
-  return /* @__PURE__ */ jsxs("section", { className: styles$l.box, "aria-label": "Shipping and returns", children: [
+  const t = useT();
+  return /* @__PURE__ */ jsxs("section", { className: styles$l.box, "aria-label": t("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(
@@ -8520,13 +8707,15 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
-  useSetScreenTitle("Cart");
+  const t = useT();
+  useSetScreenTitle(t("Cart"));
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
   onContinueShopping,
-  checkoutLabel = "Proceed to checkout"
+  checkoutLabel
 } = {}) {
+  const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
   const [cart2, setCart] = useState(null);
@@ -8576,7 +8765,7 @@ function CartViewContent({
     } catch (err) {
       if (optimistic) setCart(snapshot);
       const code = codeOf(err);
-      toast2.show(treatmentFor(code).body, code === "out_of_stock" ? "critical" : "neutral");
+      toast2.show(t(treatmentFor(code).body), code === "out_of_stock" ? "critical" : "neutral");
       return false;
     } finally {
       setPendingSku(null);
@@ -8602,7 +8791,7 @@ function CartViewContent({
         description: describeLine(removed),
         image: removed.image,
         action: {
-          label: "Undo",
+          label: t("Undo"),
           onAction: () => {
             void mutate(sku, () => api.cart.addItem({ sku, qty: removed.qty })).then((undone) => {
               if (undone) emit({ type: "add_to_cart", sku, qty: removed.qty });
@@ -8636,7 +8825,7 @@ function CartViewContent({
       /* @__PURE__ */ jsx(
         EmptyState,
         {
-          title: "Nothing here yet",
+          title: t("Nothing here yet"),
           body: "Your items will show up here once you've added to your cart.",
           action: (
             // One label, because the design gives one. In the sheet, "continue shopping"
@@ -8658,7 +8847,7 @@ function CartViewContent({
       window.location.assign(checkout_url);
     } catch (err) {
       const code = codeOf(err);
-      toast2.show(treatmentFor(code).body, "critical");
+      toast2.show(t(treatmentFor(code).body), "critical");
       setHandingOff(false);
     }
   }
@@ -8667,7 +8856,7 @@ function CartViewContent({
     /* @__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("h2", { className: styles$j.sectionTitle, children: t("Items") }),
           /* @__PURE__ */ jsx("span", { className: styles$j.count, children: itemCount })
         ] }),
         /* @__PURE__ */ jsx("ul", { className: styles$j.lines, children: cart2.items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -8693,7 +8882,7 @@ function CartViewContent({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: handingOff, children: checkoutLabel }) })
+    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: handingOff, children: checkoutLabel ?? t("Proceed to checkout") }) })
   ] });
 }
 function describeLine(item2) {
@@ -8705,13 +8894,14 @@ function useCartSheet() {
   return useContext(CartSheetContext);
 }
 function CartSheetProvider({ children }) {
+  const t = useT();
   const [isOpen, setIsOpen] = useState(false);
   const open = useCallback(() => setIsOpen(true), []);
   const close2 = useCallback(() => setIsOpen(false), []);
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: t("Cart"), children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -8735,6 +8925,7 @@ const styles$i = {
   dotActive: dotActive$2
 };
 function MediaGallery({ media: media2, alt }) {
+  const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
   useEffect(() => {
@@ -8770,7 +8961,7 @@ function MediaGallery({ media: media2, alt }) {
     }
   }
   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(
+    /* @__PURE__ */ jsx("button", { type: "button", className: styles$i.share, onClick: share2, "aria-label": t("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",
@@ -8791,7 +8982,7 @@ function MediaGallery({ media: media2, alt }) {
         priority: i === 0
       }
     ) }, src)) }),
-    media2.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$i.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": t("Gallery pagination"), children: media2.map((src, i) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -8869,6 +9060,7 @@ function convert(cell, from, to) {
   return (to === "in" ? n / CM_PER_INCH : n * CM_PER_INCH).toFixed(1);
 }
 function SizeGuideSheet({ guide, onClose }) {
+  const t = useT();
   const sheetRef = useRef(null);
   const columns = guide.columns ?? [];
   const rows = useMemo(() => guide.rows ?? [], [guide.rows]);
@@ -8893,7 +9085,7 @@ function SizeGuideSheet({ guide, onClose }) {
       "aria-labelledby": "size-guide-title",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx(SheetHeader, { onClose, closeLabel: "Close size guide" }),
+        /* @__PURE__ */ jsx(SheetHeader, { onClose, closeLabel: t("Close size guide") }),
         /* @__PURE__ */ jsxs("div", { className: styles$h.body, children: [
           /* @__PURE__ */ jsxs("div", { className: styles$h.titles, children: [
             /* @__PURE__ */ jsx("h2", { id: "size-guide-title", className: styles$h.title, children: guide.title }),
@@ -8973,10 +9165,11 @@ function SizeSelector({
   error: error2 = false,
   guide
 }) {
+  const t = useT();
   const [guideOpen, setGuideOpen] = useState(false);
   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) => {
+    /* @__PURE__ */ jsx("div", { className: styles$g.chips, role: "radiogroup", "aria-label": t("Size"), "aria-required": "true", children: sizes.map((size) => {
       const isSelected = size.value === selected2;
       const disabled2 = !size.available;
       return /* @__PURE__ */ jsxs(
@@ -9062,13 +9255,14 @@ const styles$f = {
   stockBadge
 };
 function ColorSelector({ colours, selected: selected2, onSelect }) {
+  const t = useT();
   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$f.value, children: selected2 ?? "Select" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles$f.tiles, role: "radiogroup", "aria-label": "Color", "aria-required": "true", children: colours.map((c) => {
+    /* @__PURE__ */ jsx("div", { className: styles$f.tiles, role: "radiogroup", "aria-label": t("Color"), "aria-required": "true", children: colours.map((c) => {
       const isSelected = c.value === selected2;
       const soldOut = !c.available;
       const lowStock2 = !soldOut && isLowStock(c.remaining);
@@ -9114,6 +9308,7 @@ function VariantSelector({
   onSelect,
   labelAttribute
 }) {
+  const t = useT();
   function labelFor(variant) {
     if (labelAttribute && variant.attributes[labelAttribute]) {
       return variant.attributes[labelAttribute];
@@ -9123,7 +9318,7 @@ function VariantSelector({
   }
   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) => {
+    /* @__PURE__ */ jsx("div", { className: styles$e.options, role: "radiogroup", "aria-label": t("Variant"), children: variants.map((variant) => {
       const selected2 = variant.sku === selectedSku;
       const disabled2 = !variant.in_stock;
       return /* @__PURE__ */ jsxs(
@@ -9286,6 +9481,7 @@ const styles$a = {
   oos
 };
 function ProductDetail({ product, inventory: inventory2, recommendations = [] }) {
+  const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
   const cartSheet = useCartSheet();
@@ -9364,7 +9560,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         return false;
       }
       emit({ type: "error", code, scope: "cart.addItem" });
-      toast2.show(treatmentFor(code).body, code === "out_of_stock" ? "critical" : "neutral");
+      toast2.show(t(treatmentFor(code).body), code === "out_of_stock" ? "critical" : "neutral");
       return false;
     }
   }
@@ -9387,7 +9583,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         return;
       }
       emit({ type: "error", code, scope: "stockAlerts.create" });
-      toast2.show(treatmentFor(code).body, "neutral");
+      toast2.show(t(treatmentFor(code).body), "neutral");
     } finally {
       setBusy(null);
     }
@@ -9419,7 +9615,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
       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: t("View cart"), onAction: openCart } : void 0,
       // Points the caret at the cart icon this just landed in.
       anchor: "cart"
     });
@@ -9429,7 +9625,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const available = selectedVariant?.available ?? inventory2?.available ?? 0;
   const lowStock2 = isLowStock(available);
   const stockNotice = !purchasable || lowStock2;
-  const availabilityLabel = !purchasable ? "Out of stock" : lowStock2 ? lowStockLabel(available) : "";
+  const availabilityLabel = !purchasable ? t("Out of stock") : lowStock2 ? t("Only {0} left", available) : "";
   const cta2 = purchasable ? (
     /*
      * Three labels, one button (5241:71382 / 5295:75115 / 5268:72907). "Adding to cart"
@@ -9448,7 +9644,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         onClick: inCart ? openCart : handleAdd,
         loading: busy === "add",
         disabled: busy !== null,
-        children: busy === "add" ? "Adding to cart" : inCart ? "Go to cart" : "Add to cart"
+        children: busy === "add" ? t("Adding to cart") : inCart ? t("Go to cart") : t("Add to cart")
       }
     )
   ) : /* @__PURE__ */ jsx(
@@ -9458,7 +9654,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       onClick: handleRemind,
       loading: busy === "remind",
       disabled: alerted || busy !== null,
-      children: alerted ? "We'll remind you" : "Remind me when available"
+      children: alerted ? t("We'll remind you") : t("Remind me when available")
     }
   );
   return /* @__PURE__ */ jsxs(ShopSurface, { tone: "light", fill: true, className: styles$a.page, children: [
@@ -9515,7 +9711,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       /* @__PURE__ */ jsx(
         RailCarousel,
         {
-          title: "You may also like",
+          title: t("You may also like"),
           products: recommendations.filter((p) => p.sku !== product.sku),
           inset: true
         }
@@ -9643,6 +9839,7 @@ const styles$6 = {
   disclaimer
 };
 function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
+  const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
   useEffect(() => {
@@ -9652,7 +9849,7 @@ function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
     track2.addEventListener("scroll", onScroll, { passive: true });
     return () => track2.removeEventListener("scroll", onScroll);
   }, []);
-  return /* @__PURE__ */ jsxs("section", { className: styles$6.section, "aria-label": "Reviews", children: [
+  return /* @__PURE__ */ jsxs("section", { className: styles$6.section, "aria-label": t("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: [
         "“",
@@ -9676,7 +9873,8 @@ const styles$5 = {
   body
 };
 function WhyUs({ items: items2 }) {
-  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: [
+  const t = useT();
+  return /* @__PURE__ */ jsx("section", { className: styles$5.section, "aria-label": t("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)) });
@@ -9751,6 +9949,7 @@ function CategoryContent({ page: page2 }) {
   ] });
 }
 function CategoryView({ code, initialData, onNotFound }) {
+  const t = useT();
   const { api, market, emit } = useShop();
   const [page2, setPage] = useState(initialData ?? null);
   const [error2, setError] = useState();
@@ -9774,7 +9973,7 @@ function CategoryView({ code, initialData, onNotFound }) {
   if (error2 === "category_not_found" && onNotFound) return /* @__PURE__ */ jsx(Fragment, { children: onNotFound() });
   if (page2) return /* @__PURE__ */ jsx(CategoryContent, { page: page2 });
   if (loading) return /* @__PURE__ */ jsx(ScreenSkeleton, { tone: "dark" });
-  return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: error2 ? /* @__PURE__ */ jsx(ErrorState, { code: error2 }) : /* @__PURE__ */ jsx(EmptyState, { title: "Category unavailable", body: "Check back soon." }) });
+  return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: error2 ? /* @__PURE__ */ jsx(ErrorState, { code: error2 }) : /* @__PURE__ */ jsx(EmptyState, { title: t("Category unavailable"), body: "Check back soon." }) });
 }
 function ProductView({
   sku,
@@ -9782,6 +9981,7 @@ function ProductView({
   showRecommendations = true,
   onNotFound
 }) {
+  const t = useT();
   const { api, market, emit } = useShop();
   const [product, setProduct] = useState(initialData?.product ?? null);
   const [inventory2, setInventory] = useState(initialData?.inventory ?? null);
@@ -9817,7 +10017,7 @@ function ProductView({
       live = false;
     };
   }, [api, sku, market, emit, showRecommendations]);
-  const unavailable = /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(EmptyState, { title: "Item unavailable", body: "This product is no longer available." }) });
+  const unavailable = /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(EmptyState, { title: t("Item unavailable"), body: t("This product is no longer available.") }) });
   if (error2 === "sku_not_found") {
     if (onNotFound) return /* @__PURE__ */ jsx(Fragment, { children: onNotFound() });
     return unavailable;
@@ -9936,15 +10136,25 @@ function CategoryPanel({ panel: panel2 }) {
   ] });
 }
 function useSlides() {
+  const t = useT();
   const shop = useShopOptional();
-  const [panels, setPanels] = useState(FALLBACK_PANELS);
+  const [fetched, setFetched] = useState(null);
+  const fallback = useMemo(
+    () => FALLBACK_PANELS.map((p) => ({
+      ...p,
+      title: t(p.title),
+      subtitle: t(p.subtitle),
+      cta: t(p.cta)
+    })),
+    [t]
+  );
   useEffect(() => {
     const api = shop?.api;
     if (!api) return;
     let live = true;
     void api.content.home().then((home) => {
       if (!live || home.slides.length === 0) return;
-      setPanels(
+      setFetched(
         home.slides.map((s) => ({
           key: s.key,
           title: s.title,
@@ -9960,9 +10170,10 @@ function useSlides() {
       live = false;
     };
   }, [shop]);
-  return panels;
+  return fetched ?? fallback;
 }
 function HomeShowcase() {
+  const t = useT();
   const assetUrl = useAssetUrl();
   const panels = useSlides();
   const showcaseRef = useRef(null);
@@ -9975,7 +10186,7 @@ function HomeShowcase() {
      * for the surface to fill.
      */
     /* @__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__ */ jsxs("section", { className: `${styles$2.panel} ${styles$2.hero}`, "aria-label": t("DAZN Shop"), children: [
         /* @__PURE__ */ jsx("div", { className: styles$2.heroImageBox, children: /* @__PURE__ */ jsx(
           ShopImage,
           {
@@ -9993,7 +10204,7 @@ function HomeShowcase() {
               "img",
               {
                 src: assetUrl("/figma/home/dazn-logo.svg"),
-                alt: "DAZN",
+                alt: t("DAZN"),
                 className: styles$2.logo
               }
             ),
@@ -10037,11 +10248,12 @@ function CartTrigger({ className, children, ...rest }) {
   );
 }
 function IdentityGate({ returnTo }) {
+  const t = useT();
   const emit = useShopEvent();
   return /* @__PURE__ */ jsx(
     EmptyState,
     {
-      title: "Finish signing up",
+      title: t("Finish signing up"),
       body: "Complete your DAZN sign-up to check out. Your cart is saved.",
       action: /* @__PURE__ */ jsx(Button, { onClick: () => emit({ type: "session_required", action: `sign_in:${returnTo}` }), children: "Finish signing up" })
     }
@@ -10072,22 +10284,24 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_1yjrk_25";
-const floating = "_floating_1yjrk_44";
-const scrolled = "_scrolled_1yjrk_79";
-const title$1 = "_title_1yjrk_172";
-const right = "_right_1yjrk_185";
-const spacer = "_spacer_1yjrk_198";
-const iconBtn = "_iconBtn_1yjrk_203";
-const menuBtn = "_menuBtn_1yjrk_230";
-const badge = "_badge_1yjrk_258";
-const closeSlot = "_closeSlot_1yjrk_285";
-const centred = "_centred_1yjrk_300";
+const header$1 = "_header_8o3d7_25";
+const floating = "_floating_8o3d7_44";
+const scrolled = "_scrolled_8o3d7_79";
+const title$1 = "_title_8o3d7_172";
+const leading = "_leading_8o3d7_199";
+const right = "_right_8o3d7_205";
+const spacer = "_spacer_8o3d7_218";
+const iconBtn = "_iconBtn_8o3d7_223";
+const menuBtn = "_menuBtn_8o3d7_250";
+const badge = "_badge_8o3d7_278";
+const closeSlot = "_closeSlot_8o3d7_305";
+const centred = "_centred_8o3d7_320";
 const styles$1 = {
   header: header$1,
   floating,
   scrolled,
   title: title$1,
+  leading,
   right,
   spacer,
   iconBtn,
@@ -10160,9 +10374,10 @@ function ShopHeader(props) {
 function CheckoutBar({
   title: title2,
   onClose,
-  closeLabel = "Close",
+  closeLabel,
   className
 }) {
+  const t = useT();
   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" }),
@@ -10172,7 +10387,7 @@ function CheckoutBar({
       {
         type: "button",
         className: [styles$1.iconBtn, styles$1.closeSlot].join(" "),
-        "aria-label": closeLabel,
+        "aria-label": closeLabel ?? t("Close"),
         onClick: onClose,
         children: /* @__PURE__ */ jsx(CloseMedium, {})
       }
@@ -10186,16 +10401,18 @@ function ShopBar({
   showCart = true,
   floating: floating2 = false,
   scrolled: scrolled2,
-  backLabel = "Back",
-  menuLabel = "More options",
+  backLabel,
+  menuLabel,
   className
 }) {
+  const t = useT();
   const cartCount = useCartCount();
   const screenTitle = useScreenTitle();
   const shownTitle = title2 ?? screenTitle;
+  const hasTrailing = showCart || Boolean(onMenu);
   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 cartLabel = cartCount === null ? t("Cart") : cartCount === 0 ? t("Cart, empty") : t("Cart, {0} item{1}", cartCount, cartCount === 1 ? "" : "s");
   const classes = [
     styles$1.header,
     floating2 ? styles$1.floating : "",
@@ -10203,8 +10420,14 @@ function ShopBar({
     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" }),
-    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
+    onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel ?? t("Back"), onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
+    shownTitle ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: hasTrailing ? styles$1.title : `${styles$1.title} ${styles$1.leading}`,
+        children: shownTitle
+      }
+    ) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),
@@ -10215,7 +10438,7 @@ function ShopBar({
         {
           type: "button",
           className: `${styles$1.iconBtn} ${styles$1.menuBtn}`,
-          "aria-label": menuLabel,
+          "aria-label": menuLabel ?? t("More options"),
           onClick: onMenu,
           children: /* @__PURE__ */ jsx(MenuIcon, {})
         }
@@ -10327,24 +10550,25 @@ function ShopMenuSheet({
   onClose,
   onManageOrders,
   onHelp,
-  closeLabel = "Close",
-  label: label2 = "Shop menu"
+  closeLabel,
+  label: label2
 }) {
   const sheetRef = useRef(null);
+  const t = useT();
   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",
+      title: t("Manage orders"),
+      subtitle: t("View your order history and track shipments"),
       ...onManageOrders ? { onSelect: onManageOrders } : {}
     },
     {
       key: "help",
       icon: /* @__PURE__ */ jsx(HelpIcon, {}),
-      title: "Help & Support",
+      title: t("Help & Support"),
       ...onHelp ? { onSelect: onHelp } : {}
     }
   ];
@@ -10357,10 +10581,10 @@ function ShopMenuSheet({
         className: styles.sheet,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": label2,
+        "aria-label": label2 ?? t("Shop menu"),
         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("div", { className: styles.header, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": closeLabel ?? t("Close"), children: /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
           /* @__PURE__ */ jsx("ul", { className: styles.list, children: rows.map((row2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
             "button",
             {