Saved products will show here
';\n updateSavesScrollControls();\n return;\n }\n\n list.innerHTML = items\n .map(\n (item) => `\nNo reviews match that search.
';\n return;\n }\n\n list.innerHTML = reviews\n .map((review) => {\n const rating = Number(review.rate) || 0;\n const date = formatHcxReviewDate(review.createdAt);\n const size = getHcxReviewSize(review);\n\n return `\nVerified Buyer
' : \"\"}\n${hcxEscapeHtml(review.content || \"\").replace(/\\n/g, \"
\")}
Reviews are temporarily unavailable.
' : 'No reviews yet.
';\n return;\n }\n\n section._hcxReviewState = {\n reviews,\n sort: \"recent\",\n ratingFilter: 0,\n };\n\n updateHcxProductReviewSummary(section, reviews);\n updateHcxReviewSnapshot(section, reviews);\n applyHcxReviewIntelligence(section, reviews);\n renderHcxProductReviewList(section);\n })\n .catch(() => {\n list.innerHTML = 'Reviews are temporarily unavailable.
';\n });\n };\n\n const normalizeHcxReviewProductTitle = (title) => {\n const value = String(title || \"\").trim();\n const key = value.toLowerCase().replace(/\\s+/g, \" \");\n if (key === \"training t-shirt\" || key === \"training t shirt\" || key === \"training tee\") {\n return \"LCKD IN Training T-shirt\";\n }\n return value;\n };\n\n const getHcxReviewProduct = (review) => {\n const product = review.product || (Array.isArray(review.products) ? review.products[0] : null) || {};\n const rawUrl = product.productLink || product.url || review.productLink || \"\";\n let url = \"\";\n\n if (rawUrl) {\n try {\n const parsedUrl = new URL(rawUrl, window.location.origin);\n url = parsedUrl.pathname.startsWith(\"/products/\") ? `${parsedUrl.pathname}${parsedUrl.search}` : rawUrl;\n } catch (error) {\n url = rawUrl.startsWith(\"/products/\") ? rawUrl : \"\";\n }\n }\n\n if (!url && product.handle) url = `/products/${product.handle}`;\n\n return {\n title: normalizeHcxReviewProductTitle(product.title || review.productTitle || review.product_title || \"\"),\n url,\n };\n };\n\n const getHcxReviewTitle = (review) => {\n const title = String(review.title || review.reviewTitle || review.review_title || review.subject || \"\").trim();\n const content = String(review.content || \"\").trim();\n if (!title || title.toLowerCase() === content.toLowerCase()) return \"\";\n return title;\n };\n\n const getHcxReviewCreatedTime = (review) => {\n const timestamp = new Date(review.createdAt || review.created_at || review.updatedAt || review.updated_at || 0).getTime();\n return Number.isFinite(timestamp) ? timestamp : 0;\n };\n\n const updateHcxStoreReviewSummary = (section, reviews) => {\n const count = reviews.length;\n const average = getHcxReviewAverage(reviews);\n const averageLabel = average ? average.toFixed(1) : \"0.0\";\n const countLabel = `${count} live review${count === 1 ? \"\" : \"s\"}`;\n const stars = renderHcxReviewStars(average);\n\n section.dataset.hcxReviewAverage = averageLabel;\n section.dataset.hcxReviewCount = String(count);\n\n const averageDisplay = section.querySelector(\"[data-hcx-all-review-average]\");\n const starsDisplay = section.querySelector(\"[data-hcx-all-review-stars]\");\n const countDisplay = section.querySelector(\"[data-hcx-all-review-count]\");\n\n if (averageDisplay) averageDisplay.textContent = averageLabel;\n if (starsDisplay) {\n starsDisplay.innerHTML = stars;\n starsDisplay.setAttribute(\"aria-label\", `${averageLabel} out of 5 stars`);\n starsDisplay.removeAttribute(\"aria-hidden\");\n }\n if (countDisplay) countDisplay.textContent = count ? `Based on ${countLabel}` : \"No live reviews yet\";\n };\n\n const renderHcxStoreReviewList = (section) => {\n const state = section._hcxStoreReviewState;\n const list = section.querySelector(\"[data-hcx-all-review-list]\");\n if (!state || !list) return;\n\n const search = section.querySelector(\"[data-hcx-all-review-search]\");\n const query = (search?.value || \"\").trim().toLowerCase();\n let reviews = [...state.reviews];\n\n if (query) {\n reviews = reviews.filter((review) => {\n const product = getHcxReviewProduct(review);\n const haystack = [\n review.content,\n review.firstName,\n review.first_name,\n review.lastName,\n review.last_name,\n review.productVariants,\n product.title,\n getHcxReviewSize(review),\n ]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n return haystack.includes(query);\n });\n }\n\n if (state.ratingFilter) {\n reviews = reviews.filter((review) => Math.round(Number(review.rate) || 0) >= state.ratingFilter);\n }\n\n if (state.sort === \"highest\") {\n reviews.sort((a, b) => (Number(b.rate) || 0) - (Number(a.rate) || 0) || getHcxReviewCreatedTime(b) - getHcxReviewCreatedTime(a));\n } else if (state.sort === \"lowest\") {\n reviews.sort((a, b) => (Number(a.rate) || 0) - (Number(b.rate) || 0) || getHcxReviewCreatedTime(b) - getHcxReviewCreatedTime(a));\n } else if (state.sort === \"helpful\") {\n reviews.sort((a, b) => (Number(b.helpful) || 0) - (Number(a.helpful) || 0) || getHcxReviewCreatedTime(b) - getHcxReviewCreatedTime(a));\n } else {\n reviews.sort((a, b) => getHcxReviewCreatedTime(b) - getHcxReviewCreatedTime(a));\n }\n\n if (!reviews.length) {\n list.innerHTML = 'No live reviews match that search.
';\n return;\n }\n\n list.innerHTML = reviews\n .map((review) => {\n const rating = Number(review.rate) || 0;\n const date = formatHcxReviewDate(review.createdAt || review.created_at);\n const product = getHcxReviewProduct(review);\n const productCanLink = product.url && review.isProductExists !== false;\n const productMarkup = product.title\n ? `\n \n ${\n productCanLink\n ? `${hcxEscapeHtml(product.title)}`\n : `${hcxEscapeHtml(product.title)}`\n }\n \n `\n : \"\";\n const size = getHcxReviewSize(review);\n const title = getHcxReviewTitle(review);\n const content = hcxEscapeHtml(review.content || \"\").replace(/\\n/g, \"${content}
` : \"\"}\n ${productMarkup || size ? `\n \n ` : \"\"}\nLoading live reviews
';\n\n const maxPages = hcxClamp(Number(section.dataset.hcxReviewMaxPages) || 20, 1, 50);\n\n (async () => {\n const reviews = [];\n let after = \"\";\n let page = 0;\n let hasNext = true;\n\n while (hasNext && page < maxPages) {\n page += 1;\n const payload = await fetchHcxStoreReviewPage(section, after);\n const pageReviews = Array.isArray(payload?.data?.reviews) ? payload.data.reviews : [];\n reviews.push(...pageReviews);\n after = pageReviews[pageReviews.length - 1]?.id || \"\";\n hasNext = Boolean(payload?.data?.hasNext && pageReviews.length && after);\n }\n\n const liveReviews = cleanHcxDisplayReviews(reviews);\n\n section._hcxStoreReviewState = {\n reviews: liveReviews,\n sort: \"recent\",\n ratingFilter: 0,\n };\n\n updateHcxStoreReviewSummary(section, liveReviews);\n renderHcxStoreReviewList(section);\n })().catch(() => {\n list.innerHTML = 'Live reviews are temporarily unavailable.
';\n });\n };\n\n const initHcxStoreReviews = () => {\n document.querySelectorAll(\"[data-hcx-store-reviews]\").forEach((section) => {\n if (section.dataset.hcxStoreReviewsBound !== \"true\") {\n section.dataset.hcxStoreReviewsBound = \"true\";\n\n const search = section.querySelector(\"[data-hcx-all-review-search]\");\n if (search) {\n [\"input\", \"search\", \"change\"].forEach((eventName) => {\n search.addEventListener(eventName, () => renderHcxStoreReviewList(section));\n });\n }\n\n const sortButton = section.querySelector(\"[data-hcx-all-review-sort]\");\n if (sortButton) {\n sortButton.addEventListener(\"click\", () => {\n if (!section._hcxStoreReviewState) return;\n const options = [\n [\"recent\", \"Most recent\"],\n [\"highest\", \"Highest rating\"],\n [\"lowest\", \"Lowest rating\"],\n [\"helpful\", \"Most helpful\"],\n ];\n const currentIndex = options.findIndex(([key]) => key === section._hcxStoreReviewState.sort);\n const [nextKey, nextLabel] = options[(currentIndex + 1) % options.length];\n section._hcxStoreReviewState.sort = nextKey;\n setHcxButtonLeadingText(sortButton, `Sort by: ${nextLabel} `);\n renderHcxStoreReviewList(section);\n });\n }\n\n const ratingButton = section.querySelector(\"[data-hcx-all-review-filter='rating']\");\n if (ratingButton) {\n ratingButton.addEventListener(\"click\", () => {\n if (!section._hcxStoreReviewState) return;\n const next = section._hcxStoreReviewState.ratingFilter === 5 ? 4 : section._hcxStoreReviewState.ratingFilter === 4 ? 0 : 5;\n section._hcxStoreReviewState.ratingFilter = next;\n setHcxButtonLeadingText(ratingButton, next ? `${next}+ stars ` : \"Rating \");\n renderHcxStoreReviewList(section);\n });\n }\n }\n\n loadHcxStoreReviews(section);\n });\n };\n\n const initProductReviewMetrics = () => {\n document.querySelectorAll(\"[data-hcx-product-reviews]\").forEach((section) => {\n if (section.dataset.hcxReviewsBound === \"true\") return;\n section.dataset.hcxReviewsBound = \"true\";\n\n const buttons = [...section.querySelectorAll(\"[data-hcx-review-metric]\")];\n\n buttons.forEach((button) => {\n button.addEventListener(\"click\", () => setProductReviewMetric(section, button));\n });\n\n const search = section.querySelector(\"[data-hcx-review-search]\");\n if (search) {\n [\"input\", \"search\", \"change\"].forEach((eventName) => {\n search.addEventListener(eventName, () => renderHcxProductReviewList(section));\n });\n }\n\n const sortButton = section.querySelector(\"[data-hcx-review-sort]\");\n if (sortButton) {\n sortButton.addEventListener(\"click\", () => {\n if (!section._hcxReviewState) return;\n const options = [\n [\"recent\", \"Most recent\"],\n [\"highest\", \"Highest rating\"],\n [\"helpful\", \"Most helpful\"],\n ];\n const currentIndex = options.findIndex(([key]) => key === section._hcxReviewState.sort);\n const [nextKey, nextLabel] = options[(currentIndex + 1) % options.length];\n section._hcxReviewState.sort = nextKey;\n setHcxButtonLeadingText(sortButton, `Sort by: ${nextLabel} `);\n renderHcxProductReviewList(section);\n });\n }\n\n const ratingButton = section.querySelector(\"[data-hcx-review-filter='rating']\");\n if (ratingButton) {\n ratingButton.addEventListener(\"click\", () => {\n if (!section._hcxReviewState) return;\n const next = section._hcxReviewState.ratingFilter === 5 ? 4 : section._hcxReviewState.ratingFilter === 4 ? 0 : 5;\n section._hcxReviewState.ratingFilter = next;\n setHcxButtonLeadingText(ratingButton, next ? `${next}+ stars ` : \"Rating \");\n renderHcxProductReviewList(section);\n });\n }\n\n setProductReviewMetric(section, section.querySelector(\"[data-hcx-review-metric].is-active\") || buttons[0]);\n loadHcxProductReviews(section);\n });\n };\n\n const rerenderProductReviewApp = () => {\n if (typeof window.avadaAirReviewRerender !== \"function\") return;\n window.requestAnimationFrame(() => window.avadaAirReviewRerender());\n };\n\n const staleLegacyProgrammeTextPattern = /\\b(gold|joy|thief)\\b/i;\n const normaliseLegacyProgrammeCopy = (value = \"\") =>\n String(value)\n .replace(/\\bthief\\b/gi, (match) => {\n if (match === match.toUpperCase()) return \"MORTAL\";\n return match[0] === match[0].toUpperCase() ? \"Mortal\" : \"mortal\";\n })\n .replace(/\\bgold\\b/gi, (match) => (match[0] === \"G\" ? \"Points\" : \"points\"))\n .replace(/\\bjoy\\b/gi, (match) => (match === match.toUpperCase() ? \"LEGACY\" : \"Legacy\"));\n\n const normaliseJoyPointsLanguage = () => {\n const joy = window.AVADA_JOY;\n if (!joy || html.dataset.hcxJoyPointsLanguageNormalised === \"true\") return;\n\n html.dataset.hcxJoyPointsLanguageNormalised = \"true\";\n\n const visited = new Set();\n const rewrite = (value) => {\n if (typeof value === \"string\") {\n return normaliseLegacyProgrammeCopy(value);\n }\n\n if (!value || typeof value !== \"object\" || visited.has(value)) return value;\n visited.add(value);\n\n Object.keys(value).forEach((key) => {\n value[key] = rewrite(value[key]);\n });\n\n return value;\n };\n\n rewrite(joy);\n };\n\n const normaliseLegacyProgramText = (root) => {\n if (!root || !document.createTreeWalker) return;\n\n const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {\n acceptNode(node) {\n const parent = node.parentElement;\n if (!parent || [\"SCRIPT\", \"STYLE\", \"NOSCRIPT\", \"TEXTAREA\"].includes(parent.tagName)) {\n return NodeFilter.FILTER_REJECT;\n }\n\n return staleLegacyProgrammeTextPattern.test(node.nodeValue || \"\")\n ? NodeFilter.FILTER_ACCEPT\n : NodeFilter.FILTER_REJECT;\n },\n });\n\n const nodes = [];\n while (walker.nextNode()) nodes.push(walker.currentNode);\n nodes.forEach((node) => {\n node.nodeValue = normaliseLegacyProgrammeCopy(node.nodeValue || \"\");\n });\n\n const attributeNodes = root.nodeType === Node.ELEMENT_NODE\n ? [root, ...root.querySelectorAll(\"*\")]\n : [];\n attributeNodes.forEach((node) => {\n [\"aria-label\", \"title\", \"alt\", \"placeholder\", \"value\"].forEach((attribute) => {\n if (!node.hasAttribute?.(attribute)) return;\n const current = node.getAttribute(attribute) || \"\";\n if (!staleLegacyProgrammeTextPattern.test(current)) return;\n node.setAttribute(attribute, normaliseLegacyProgrammeCopy(current));\n });\n });\n };\n\n const initLoyaltyProgram = () => {\n normaliseJoyPointsLanguage();\n\n const formatPoints = (value) => Math.max(0, Math.round(value || 0)).toLocaleString(\"en-GB\");\n const formatPounds = (value) =>\n new Intl.NumberFormat(\"en-GB\", {\n style: \"currency\",\n currency: \"GBP\",\n maximumFractionDigits: 0,\n }).format(Math.max(0, Math.floor(value || 0)));\n\n const getRewardAlertKey = (section) => {\n const customerKey = section.dataset.hcxRewardAlertKey || \"guest\";\n const rewardSteps = Math.max(0, Number(section.dataset.hcxAvailableRewardSteps || 0));\n\n return `hcx:legacy-reward-alert:${customerKey}:${rewardSteps}`;\n };\n\n const setRewardAlertState = (section, isActive) => {\n section.dataset.hcxRewardAlertActive = isActive ? \"true\" : \"false\";\n section.classList.toggle(\"hcx-has-reward-alert\", isActive);\n section.querySelectorAll(\"[data-hcx-reward-alert-badge]\").forEach((badge) => {\n badge.hidden = !isActive;\n });\n section.dispatchEvent(new CustomEvent(\"hcx:reward-alert-changed\"));\n };\n\n const syncRewardAlert = (section) => {\n const rewardSteps = Math.max(0, Number(section.dataset.hcxAvailableRewardSteps || 0));\n let isDismissed = false;\n\n try {\n isDismissed = window.localStorage.getItem(getRewardAlertKey(section)) === \"dismissed\";\n } catch (error) {\n isDismissed = false;\n }\n\n setRewardAlertState(section, rewardSteps > 0 && !isDismissed);\n };\n\n const dismissRewardAlert = (section) => {\n if (!section || section.dataset.hcxRewardAlertActive !== \"true\") return;\n\n try {\n window.localStorage.setItem(getRewardAlertKey(section), \"dismissed\");\n } catch (error) {\n // Non-critical: private browsing can block localStorage.\n }\n\n setRewardAlertState(section, false);\n };\n\n const syncRewardPortalFallback = (section) => {\n const surface = section?.querySelector(\"[data-hcx-joy-app-surface]\");\n const fallback = surface?.querySelector(\"[data-hcx-joy-fallback-panel]\");\n if (!surface || !fallback) return;\n\n const hasRewardApp = [...surface.querySelectorAll(\".hcx-loyalty-joy__block\")].some((block) =>\n block.children.length > 0 || (block.textContent || \"\").trim().length > 0\n );\n fallback.hidden = hasRewardApp;\n };\n\n const getRewardSurface = (trigger, program) => {\n const selector = trigger.dataset.hcxRewardSurface || \"\";\n if (selector) {\n try {\n return program?.querySelector(selector) || document.querySelector(selector);\n } catch (error) {\n return null;\n }\n }\n\n return program?.querySelector(\"[data-hcx-joy-app-surface]\") || document.querySelector(\"[data-hcx-joy-app-surface]\");\n };\n\n const focusRewardSurface = (surface) => {\n if (!(surface instanceof HTMLElement)) return false;\n\n surface.hidden = false;\n surface.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n window.setTimeout(() => {\n if (!surface.hasAttribute(\"tabindex\")) surface.setAttribute(\"tabindex\", \"-1\");\n surface.focus({ preventScroll: true });\n }, 220);\n return true;\n };\n\n const bindLegacyTextNormaliser = (root) => {\n if (!root || root.dataset.hcxLegacyTextObserverBound === \"true\") return;\n\n normaliseLegacyProgramText(root);\n root.dataset.hcxLegacyTextObserverBound = \"true\";\n new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n const target =\n mutation.target.nodeType === Node.TEXT_NODE\n ? mutation.target.parentElement\n : mutation.target;\n normaliseLegacyProgramText(target);\n });\n }).observe(root, { childList: true, characterData: true, subtree: true, attributes: true });\n };\n\n const profileTextRoots = [...new Set([\n ...document.querySelectorAll(\"[data-hcx-loyalty-program], .customer.account, .hcx-account-legacy\"),\n ...(document.body.classList.contains(\"template-customers-account\")\n ? [document.getElementById(\"MainContent\"), document.body]\n : []),\n ].filter(Boolean))];\n profileTextRoots.forEach(bindLegacyTextNormaliser);\n\n document.querySelectorAll(\"[data-hcx-loyalty-program]\").forEach((section) => {\n if (section.dataset.hcxLoyaltyBound === \"true\") return;\n section.dataset.hcxLoyaltyBound = \"true\";\n\n syncRewardAlert(section);\n syncRewardPortalFallback(section);\n\n const rewardSurface = section.querySelector(\"[data-hcx-joy-app-surface]\");\n if (rewardSurface) {\n new MutationObserver(() => syncRewardPortalFallback(section)).observe(rewardSurface, {\n childList: true,\n subtree: true,\n });\n }\n });\n\n if (html.dataset.hcxJoyTriggerBound === \"true\") return;\n html.dataset.hcxJoyTriggerBound = \"true\";\n\n document.addEventListener(\"click\", (event) => {\n const trigger = event.target.closest(\"[data-hcx-open-joy]\");\n if (!trigger) return;\n\n event.preventDefault();\n const program = trigger.closest(\"[data-hcx-loyalty-program]\");\n const couponTrigger = trigger.closest(\"[data-hcx-coupon-value]\");\n\n if (program && couponTrigger) {\n program.querySelectorAll(\"[data-hcx-coupon-value]\").forEach((coupon) => {\n coupon.classList.toggle(\"is-selected\", coupon === couponTrigger);\n });\n program.dataset.hcxSelectedCouponValue = couponTrigger.dataset.hcxCouponValue || \"\";\n program.dataset.hcxSelectedCouponPoints = couponTrigger.dataset.hcxCouponPoints || \"\";\n }\n\n dismissRewardAlert(program);\n\n const rewardSurface = getRewardSurface(trigger, program);\n\n if (typeof window.avadaJoyTrigger === \"function\") {\n try {\n window.avadaJoyTrigger();\n } catch (error) {\n // Keep the embedded rewards surface as the reliable fallback.\n }\n }\n\n if (focusRewardSurface(rewardSurface)) return;\n\n const fallback = trigger.dataset.hcxJoyFallback || trigger.getAttribute(\"href\") || \"/pages/legacy#legacy-rewards\";\n if (fallback.startsWith(\"#\")) {\n const fallbackSurface = document.querySelector(fallback);\n if (focusRewardSurface(fallbackSurface)) return;\n }\n\n window.location.href = fallback;\n });\n };\n\n const initLegacyRegisterForm = () => {\n document.querySelectorAll(\".customer.register form, .hcx-legacy-signup-form\").forEach((form) => {\n if (form.dataset.hcxLegacyRegisterBound === \"true\") return;\n\n const birthdayInput = form.querySelector(\"[data-hcx-birthday-input]\");\n const emailInput = form.querySelector(\"[data-hcx-legacy-email], input[type='email'][required]\");\n if (!birthdayInput) return;\n\n form.dataset.hcxLegacyRegisterBound = \"true\";\n\n const validateBirthday = () => {\n birthdayInput.setCustomValidity(\"\");\n\n if (!birthdayInput.value) {\n birthdayInput.setCustomValidity(\"Enter your birthday to save it to your Legacy profile.\");\n return false;\n }\n\n const selectedDate = new Date(`${birthdayInput.value}T00:00:00`);\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n if (Number.isNaN(selectedDate.getTime()) || selectedDate > today) {\n birthdayInput.setCustomValidity(\"Enter a valid birthday.\");\n return false;\n }\n\n return true;\n };\n\n const validateEmail = () => {\n if (!emailInput) return true;\n\n emailInput.setCustomValidity(\"\");\n if (emailInput.validity.valid) return true;\n\n emailInput.setCustomValidity(\"Enter a valid email for your Legacy profile.\");\n return false;\n };\n\n birthdayInput.addEventListener(\"input\", validateBirthday);\n if (emailInput) emailInput.addEventListener(\"input\", validateEmail);\n form.addEventListener(\"submit\", (event) => {\n const hasValidEmail = validateEmail();\n const hasValidBirthday = validateBirthday();\n if (hasValidEmail && hasValidBirthday) return;\n\n event.preventDefault();\n const target = hasValidEmail ? birthdayInput : emailInput;\n target.reportValidity();\n target.focus({ preventScroll: false });\n });\n });\n };\n\n const initCookieConsentFallback = () => {\n if (html.dataset.hcxCookieConsentFallback === \"true\") return;\n html.dataset.hcxCookieConsentFallback = \"true\";\n\n const dialogSelector = \".shopify-pc__banner__dialog, [class*='shopify-pc__banner'][class*='dialog']\";\n const privacySelector = [\n \"[id*='shopify-pc']\",\n \"[class*='shopify-pc']\",\n \"[id*='shopify-privacy']\",\n \"[class*='shopify-privacy']\",\n \"[id*='privacy-banner']\",\n \"[class*='privacy-banner']\",\n ].join(\", \");\n const privacyButtonSelector = privacySelector\n .split(\", \")\n .map((selector) => `${selector} button`)\n .join(\", \");\n const allConsentButtonSelector = `${privacyButtonSelector}, button, a[role='button'], [role='button']`;\n\n const getElementText = (element) => (element?.textContent || \"\").trim().replace(/\\s+/g, \" \");\n const getButtonLabel = (button) =>\n [\n getElementText(button),\n button.getAttribute(\"aria-label\") || \"\",\n button.getAttribute(\"data-action\") || \"\",\n button.id || \"\",\n button.className || \"\",\n ]\n .join(\" \")\n .toLowerCase();\n const isVisibleElement = (element) => {\n if (!(element instanceof Element)) return false;\n const rect = element.getBoundingClientRect();\n const style = window.getComputedStyle(element);\n return rect.width > 0 && rect.height > 0 && style.display !== \"none\" && style.visibility !== \"hidden\";\n };\n const getCookieSurface = (element) => {\n if (!(element instanceof Element)) return null;\n\n const directSurface = element.closest(privacySelector);\n if (directSurface) return directSurface;\n\n let node = element.parentElement;\n let depth = 0;\n while (node && node !== document.body && depth < 8) {\n const text = getElementText(node).toLowerCase();\n const looksLikeCookieSurface =\n /(cookie consent|cookies|privacy policy)/.test(text) &&\n /(accept|decline|reject|deny|manage preferences|save preferences)/.test(text);\n\n if (looksLikeCookieSurface) return node;\n node = node.parentElement;\n depth += 1;\n }\n\n return null;\n };\n const isCookieConsentButton = (button) => {\n if (!(button instanceof Element) || !isVisibleElement(button) || !getCookieSurface(button)) return false;\n return /(accept|allow|decline|reject|deny|manage preferences|save preferences|confirm)/.test(getButtonLabel(button));\n };\n const prepareCookieConsentClickTargets = () => {\n document.querySelectorAll(allConsentButtonSelector).forEach((button) => {\n if (!isCookieConsentButton(button)) return;\n\n const surface = getCookieSurface(button);\n surface?.classList.add(\"hcx-cookie-consent-surface\");\n button.classList.add(\"hcx-cookie-consent-button\");\n\n const rect = button.getBoundingClientRect();\n const x = rect.left + rect.width / 2;\n const y = rect.top + rect.height / 2;\n const stack = typeof document.elementsFromPoint === \"function\" ? document.elementsFromPoint(x, y) : [];\n\n for (const element of stack) {\n if (!(element instanceof HTMLElement)) continue;\n if (element === button || button.contains(element) || element.closest(\".hcx-cookie-consent-surface\")) break;\n if (element === document.body || element === document.documentElement) continue;\n\n const style = window.getComputedStyle(element);\n const canBlockClick =\n style.pointerEvents !== \"none\" &&\n ([\"fixed\", \"sticky\", \"absolute\"].includes(style.position) || style.zIndex !== \"auto\");\n\n if (canBlockClick) element.classList.add(\"hcx-cookie-click-through\");\n }\n });\n };\n\n const hideBanner = (button) => {\n const dialog = button.closest(dialogSelector);\n const cookieSurface = getCookieSurface(button);\n const privacyAncestors = [];\n let node = button.parentElement;\n\n while (node && node !== document.body) {\n if (node.matches(privacySelector)) privacyAncestors.push(node);\n node = node.parentElement;\n }\n\n [dialog, cookieSurface, ...privacyAncestors].forEach((bannerNode) => {\n if (!bannerNode) return;\n bannerNode.classList.add(\"hcx-cookie-consent-hidden\");\n bannerNode.setAttribute(\"aria-hidden\", \"true\");\n });\n };\n\n const getConsentChoice = (button) => {\n const buttonText = button.textContent.trim().toLowerCase();\n const buttonName = `${button.className || \"\"} ${button.getAttribute(\"data-action\") || \"\"}`.toLowerCase();\n const label = `${buttonName} ${buttonText}`;\n\n if (buttonText.includes(\"manage\")) return null;\n if (/(decline|reject|deny)/.test(label)) return false;\n if (/(accept|allow)/.test(label)) return true;\n\n return null;\n };\n\n const nativeClickConsentButton = (button) => {\n if (button.dataset.hcxCookieActivating === \"true\") return;\n\n button.dataset.hcxCookieActivating = \"true\";\n window.setTimeout(() => {\n try {\n button.click();\n } catch (error) {\n window.HCXCookieConsentNativeClickError = true;\n }\n window.setTimeout(() => {\n delete button.dataset.hcxCookieActivating;\n }, 250);\n }, 0);\n };\n\n const applyConsentChoice = (button, consentChoice) => {\n const setTrackingConsent = window.Shopify?.customerPrivacy?.setTrackingConsent;\n if (typeof setTrackingConsent !== \"function\" || consentChoice === null) return false;\n\n try {\n setTrackingConsent.call(window.Shopify.customerPrivacy, consentChoice, () => hideBanner(button));\n return true;\n } catch (error) {\n return false;\n }\n };\n\n const getConsentButtonFromEvent = (event) => {\n const target = event.target instanceof Element ? event.target : event.target?.parentElement;\n const directButton = target?.closest(allConsentButtonSelector);\n if (isCookieConsentButton(directButton)) return directButton;\n\n const stack =\n typeof document.elementsFromPoint === \"function\" && Number.isFinite(event.clientX) && Number.isFinite(event.clientY)\n ? document.elementsFromPoint(event.clientX, event.clientY)\n : [];\n\n for (const element of stack) {\n const button = element instanceof Element ? element.closest(allConsentButtonSelector) : null;\n if (isCookieConsentButton(button)) return button;\n }\n\n return null;\n };\n\n const activateConsentButton = (button) => {\n const consentChoice = getConsentChoice(button);\n\n if (consentChoice === null) {\n nativeClickConsentButton(button);\n return;\n }\n\n const usedConsentApi = applyConsentChoice(button, consentChoice);\n if (!usedConsentApi) nativeClickConsentButton(button);\n\n window.setTimeout(() => hideBanner(button), 250);\n window.setTimeout(() => hideBanner(button), 900);\n window.setTimeout(() => hideBanner(button), 1800);\n };\n\n document.addEventListener(\n \"pointerdown\",\n () => {\n window.requestAnimationFrame(prepareCookieConsentClickTargets);\n },\n true\n );\n\n document.addEventListener(\n \"click\",\n (event) => {\n prepareCookieConsentClickTargets();\n\n const button = getConsentButtonFromEvent(event);\n if (!button) return;\n if (button.dataset.hcxCookieActivating === \"true\") return;\n\n const buttonText = button.textContent.trim().toLowerCase();\n const buttonName = `${button.className || \"\"} ${button.getAttribute(\"data-action\") || \"\"}`.toLowerCase();\n const finalChoice =\n /(accept|decline|save|confirm|reject|deny)/.test(buttonName) ||\n /^(accept|decline|save|save preferences|confirm|reject all|deny)$/.test(buttonText);\n\n if (buttonText.includes(\"manage\")) {\n event.preventDefault();\n event.stopPropagation();\n nativeClickConsentButton(button);\n return;\n }\n\n if (!finalChoice) return;\n\n event.preventDefault();\n event.stopPropagation();\n activateConsentButton(button);\n },\n true\n );\n\n prepareCookieConsentClickTargets();\n\n const observer = new MutationObserver(() => {\n window.requestAnimationFrame(prepareCookieConsentClickTargets);\n });\n observer.observe(document.body, { childList: true, subtree: true });\n };\n\n const THREE_MODULE_URL = \"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js\";\n let hcxThreeModulePromise = null;\n\n const loadThreeModule = () => {\n if (!hcxThreeModulePromise) hcxThreeModulePromise = import(THREE_MODULE_URL);\n return hcxThreeModulePromise;\n };\n\n const drawRoundedRect = (context, x, y, width, height, radius) => {\n const r = Math.min(radius, width / 2, height / 2);\n\n context.beginPath();\n context.moveTo(x + r, y);\n context.lineTo(x + width - r, y);\n context.quadraticCurveTo(x + width, y, x + width, y + r);\n context.lineTo(x + width, y + height - r);\n context.quadraticCurveTo(x + width, y + height, x + width - r, y + height);\n context.lineTo(x + r, y + height);\n context.quadraticCurveTo(x, y + height, x, y + height - r);\n context.lineTo(x, y + r);\n context.quadraticCurveTo(x, y, x + r, y);\n context.closePath();\n };\n\n const clampValue = (value, min, max) => Math.min(Math.max(value, min), max);\n const smoothStep = (value) => value * value * (3 - 2 * value);\n\n const wrapCanvasText = (context, text, x, y, maxWidth, lineHeight, maxLines = 3) => {\n const words = String(text || \"\").split(/\\s+/).filter(Boolean);\n let line = \"\";\n let lineCount = 0;\n\n words.forEach((word, index) => {\n const testLine = line ? `${line} ${word}` : word;\n const isLastWord = index === words.length - 1;\n\n if (context.measureText(testLine).width > maxWidth && line) {\n context.fillText(line, x, y + lineCount * lineHeight);\n line = word;\n lineCount += 1;\n } else {\n line = testLine;\n }\n\n if ((isLastWord || lineCount === maxLines - 1) && line) {\n const output = lineCount === maxLines - 1 && !isLastWord ? `${line.replace(/\\.*$/, \"\")}...` : line;\n context.fillText(output, x, y + lineCount * lineHeight);\n line = \"\";\n }\n });\n };\n\n const normalizePhoneCopy = (value) =>\n String(value || \"\")\n .replace(/\\u00c2?\\u00a3/g, \"GBP \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n const getLoyaltyPhoneTimeText = () => {\n const now = new Date();\n\n try {\n const formatter = new Intl.DateTimeFormat(typeof navigator !== \"undefined\" ? navigator.language : undefined, {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const parts = formatter.formatToParts(now);\n const hour = parts.find((part) => part.type === \"hour\")?.value;\n const minute = parts.find((part) => part.type === \"minute\")?.value;\n const separator =\n parts.find((part, index) => part.type === \"literal\" && parts[index - 1]?.type === \"hour\" && parts[index + 1]?.type === \"minute\")?.value ||\n \":\";\n\n if (hour && minute) return `${hour}${separator}${minute}`.replace(/\\s+/g, \"\");\n\n return formatter.format(now).replace(/\\s?(AM|PM|am|pm)\\s?/g, \"\").trim();\n } catch (error) {\n return now.toLocaleTimeString([], { hour: \"numeric\", minute: \"2-digit\" }).replace(/\\s?(AM|PM|am|pm)\\s?/g, \"\").trim();\n }\n };\n\n const drawLoyaltyPhoneOrderNotification = (context, notification) => {\n if (!notification?.item) return;\n\n const item = normalizePhoneCopy(notification.item).slice(0, 54);\n const timeAgo = normalizePhoneCopy(notification.timeAgo || \"now\").slice(0, 20);\n const x = 34;\n const y = 90;\n const width = 452;\n const height = 122;\n\n context.save();\n context.shadowColor = \"rgba(0, 0, 0, 0.42)\";\n context.shadowBlur = 28;\n context.shadowOffsetY = 14;\n const cardGradient = context.createLinearGradient(x, y, x + width, y + height);\n cardGradient.addColorStop(0, \"rgba(255, 255, 255, 0.96)\");\n cardGradient.addColorStop(.48, \"rgba(242, 242, 242, 0.9)\");\n cardGradient.addColorStop(1, \"rgba(217, 217, 217, 0.82)\");\n context.fillStyle = cardGradient;\n drawRoundedRect(context, x, y, width, height, 30);\n context.fill();\n context.shadowBlur = 0;\n context.shadowOffsetY = 0;\n context.strokeStyle = \"rgba(255, 255, 255, 0.86)\";\n context.lineWidth = 1.4;\n drawRoundedRect(context, x, y, width, height, 30);\n context.stroke();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.28)\";\n drawRoundedRect(context, x + 14, y + 8, width - 28, 2.4, 1.2);\n context.fill();\n\n context.fillStyle = \"rgba(5, 5, 5, 0.94)\";\n drawRoundedRect(context, x + 20, y + 28, 46, 46, 14);\n context.fill();\n context.fillStyle = \"rgba(255, 255, 255, 0.96)\";\n context.font = '900 19px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.textAlign = \"center\";\n context.textBaseline = \"middle\";\n context.fillText(\"H\", x + 43, y + 51);\n context.textAlign = \"left\";\n context.textBaseline = \"alphabetic\";\n\n context.fillStyle = \"rgba(5, 5, 5, 0.62)\";\n context.font = '800 12px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"HERCXLES\", x + 82, y + 32);\n context.textAlign = \"right\";\n context.fillStyle = \"rgba(5, 5, 5, 0.48)\";\n context.fillText(timeAgo.toUpperCase(), x + width - 24, y + 32);\n context.textAlign = \"left\";\n\n context.fillStyle = \"rgba(5, 5, 5, 0.96)\";\n context.font = '800 17px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"Someone bought\", x + 82, y + 58);\n context.fillStyle = \"rgba(5, 5, 5, 0.68)\";\n context.font = '700 15px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n wrapCanvasText(context, item, x + 82, y + 84, width - 112, 18, 2);\n context.restore();\n };\n\n const createLoyaltyPhoneTexture = (THREE, pointsText, tierText, isBack = false, screenSpec = null, phoneTimeText = getLoyaltyPhoneTimeText()) => {\n const textureCanvas = document.createElement(\"canvas\");\n textureCanvas.width = 520;\n textureCanvas.height = 1040;\n const context = textureCanvas.getContext(\"2d\");\n if (isBack) {\n context.fillStyle = \"#101010\";\n } else {\n const screenBackground = context.createLinearGradient(0, 0, 520, 1040);\n screenBackground.addColorStop(0, screenSpec ? \"#575757\" : \"#464646\");\n screenBackground.addColorStop(.46, screenSpec ? \"#303030\" : \"#343434\");\n screenBackground.addColorStop(1, screenSpec ? \"#4b4b4b\" : \"#3f3f3f\");\n context.fillStyle = screenBackground;\n }\n context.fillRect(0, 0, 520, 1040);\n\n if (!screenSpec) {\n context.strokeStyle = \"rgba(218, 218, 218, 0.16)\";\n context.lineWidth = 2;\n for (let y = 88; y < 980; y += 74) {\n context.beginPath();\n context.moveTo(52, y);\n context.lineTo(468, y);\n context.stroke();\n }\n }\n\n context.fillStyle = \"rgba(218, 218, 218, 1)\";\n context.font = '600 32px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.letterSpacing = \"4px\";\n if (!screenSpec) context.fillText(\"LEGACY\", 56, 96);\n\n if (isBack) {\n context.fillStyle = \"rgba(255, 255, 255, 1)\";\n context.font = '700 43px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"HERCXLES\", 56, 512);\n context.fillStyle = \"rgba(218, 218, 218, 0.86)\";\n context.font = '500 22px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"LEGACY DEVICE\", 56, 556);\n } else if (screenSpec) {\n const pages = screenSpec.pages || [\"Welcome\", \"Points\", \"Tiers\", \"Orders\"];\n const activePage = Math.max(0, Number(screenSpec.index || 0));\n const hoveredPage = Number.isFinite(Number(screenSpec.hoverIndex)) ? Number(screenSpec.hoverIndex) : -1;\n const accountLabel = normalizePhoneCopy(screenSpec.accountLabel || \"Guest\").slice(0, 18).toUpperCase();\n const defaultPageSummaries = [\n `${pointsText || \"0\"} pts / ${tierText || \"Athlete\"}`,\n \"Earn and redeem\",\n \"Tier progress\",\n \"Orders and returns\",\n ];\n const pageSummaries = screenSpec.pageSummaries || pages.map((page, index) => defaultPageSummaries[index] || `${page} panel`);\n\n context.letterSpacing = \"0px\";\n\n context.fillStyle = \"rgba(0, 0, 0, 0.96)\";\n drawRoundedRect(context, 188, 38, 144, 40, 20);\n context.fill();\n context.strokeStyle = \"rgba(255, 255, 255, 0.1)\";\n context.stroke();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.84)\";\n context.font = '600 17px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(phoneTimeText, 40, 68);\n context.fillStyle = \"rgba(255, 255, 255, 0.6)\";\n drawRoundedRect(context, 438, 52, 34, 15, 5);\n context.fill();\n context.fillStyle = \"rgba(255, 255, 255, 0.34)\";\n drawRoundedRect(context, 476, 57, 4, 5, 2);\n context.fill();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.96)\";\n context.font = '600 24px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(accountLabel, 34, 126);\n context.fillStyle = \"rgba(218, 218, 218, 0.66)\";\n context.font = '500 12px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"LEGACY ACCOUNT\", 36, 150);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.1)\";\n drawRoundedRect(context, 36, 170, 448, 7, 4);\n context.fill();\n const progressWidth = 448 * ((activePage + 1) / Math.max(pages.length, 1));\n const progressGradient = context.createLinearGradient(36, 0, 484, 0);\n progressGradient.addColorStop(0, \"#f5f5f5\");\n progressGradient.addColorStop(1, \"#a8a8a8\");\n context.fillStyle = progressGradient;\n drawRoundedRect(context, 36, 170, progressWidth, 7, 4);\n context.fill();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.92)\";\n context.font = '600 17px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(normalizePhoneCopy(screenSpec.eyebrow || \"01 / PROFILE\"), 34, 220);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.58)\";\n context.font = '500 12px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"SCROLL TO SELECT\", 34, 243);\n\n pages.slice(0, 7).forEach((page, index) => {\n const rowY = 280 + index * 93;\n const selected = index === activePage;\n const hovered = !selected && index === hoveredPage;\n const rowGradient = context.createLinearGradient(28, rowY, 492, rowY + 76);\n\n rowGradient.addColorStop(0, selected ? \"rgba(245, 245, 245, 0.92)\" : hovered ? \"rgba(255, 255, 255, 0.22)\" : \"rgba(255, 255, 255, 0.13)\");\n rowGradient.addColorStop(1, selected ? \"rgba(190, 190, 190, 0.78)\" : hovered ? \"rgba(255, 255, 255, 0.11)\" : \"rgba(255, 255, 255, 0.06)\");\n if (hovered) {\n context.save();\n context.shadowColor = \"rgba(255, 255, 255, 0.16)\";\n context.shadowBlur = 20;\n }\n context.fillStyle = rowGradient;\n drawRoundedRect(context, 28, rowY, 464, 76, 24);\n context.fill();\n if (hovered) context.restore();\n context.strokeStyle = selected ? \"rgba(255, 255, 255, 0.72)\" : hovered ? \"rgba(255, 255, 255, 0.34)\" : \"rgba(218, 218, 218, 0.16)\";\n context.stroke();\n\n context.fillStyle = selected ? \"rgba(5, 5, 5, 0.74)\" : hovered ? \"rgba(255, 255, 255, 0.72)\" : \"rgba(218, 218, 218, 0.58)\";\n context.font = '600 13px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(String(index + 1).padStart(2, \"0\"), 54, rowY + 32);\n\n context.fillStyle = selected ? \"rgba(5, 5, 5, 0.98)\" : hovered ? \"rgba(255, 255, 255, 1)\" : \"rgba(255, 255, 255, 0.94)\";\n context.font = '600 24px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(normalizePhoneCopy(page).toUpperCase(), 104, rowY + 35);\n\n context.fillStyle = selected ? \"rgba(5, 5, 5, 0.62)\" : \"rgba(255, 255, 255, 0.5)\";\n context.font = '500 13px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(normalizePhoneCopy(pageSummaries[index]).slice(0, 38), 104, rowY + 60);\n\n if (selected) {\n context.fillStyle = \"rgba(5, 5, 5, 0.92)\";\n drawRoundedRect(context, 446, rowY + 22, 28, 32, 14);\n context.fill();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.96)\";\n context.font = '600 15px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\">\", 456, rowY + 43);\n }\n\n if (screenSpec.rewardAlert && index === (screenSpec.rewardAlertIndex ?? pages.length - 1)) {\n const countText = Number(screenSpec.rewardAlertCount || 0) > 9 ? \"9+\" : String(Math.max(1, Number(screenSpec.rewardAlertCount || 1)));\n\n context.save();\n context.shadowColor = \"rgba(255, 255, 255, 0.34)\";\n context.shadowBlur = 16;\n context.fillStyle = \"#f2f2f2\";\n drawRoundedRect(context, 452, rowY - 6, countText.length > 1 ? 32 : 24, 24, 12);\n context.fill();\n context.shadowBlur = 0;\n context.strokeStyle = \"rgba(255, 255, 255, 0.92)\";\n context.lineWidth = 3;\n drawRoundedRect(context, 452, rowY - 6, countText.length > 1 ? 32 : 24, 24, 12);\n context.stroke();\n context.fillStyle = \"#050505\";\n context.font = '600 13px \"Helvetica Neue\", Arial, sans-serif';\n context.textAlign = \"center\";\n context.textBaseline = \"middle\";\n context.fillText(countText, 452 + (countText.length > 1 ? 16 : 12), rowY + 6);\n context.restore();\n }\n });\n\n context.fillStyle = \"rgba(255, 255, 255, 0.58)\";\n context.font = '500 12px \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(normalizePhoneCopy(screenSpec.footer || \"Current tab highlighted\").toUpperCase(), 34, 946);\n\n drawLoyaltyPhoneOrderNotification(context, screenSpec.orderNotification);\n } else {\n context.fillStyle = \"rgba(255, 255, 255, 1)\";\n context.font = '500 138px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(pointsText || \"0\", 54, 286);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.58)\";\n context.font = '600 22px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"POINTS BALANCE\", 58, 330);\n\n const rows = [\n [\"TIER\", tierText || \"Mortal\"],\n [\"NEXT REWARD\", \"GBP 10\"],\n [\"LEGACY\", \"READY\"],\n ];\n\n rows.forEach(([label, value], index) => {\n const rowY = 448 + index * 142;\n\n context.fillStyle = \"rgba(255, 255, 255, 0.06)\";\n drawRoundedRect(context, 48, rowY - 68, 424, 96, 28);\n context.fill();\n context.strokeStyle = \"rgba(218, 218, 218, 0.18)\";\n context.lineWidth = 2;\n context.stroke();\n\n context.fillStyle = \"rgba(218, 218, 218, 0.82)\";\n context.font = '600 19px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(label, 74, rowY - 26);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.94)\";\n context.font = '600 31px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(value, 74, rowY + 14);\n });\n\n const progressX = 56;\n const progressY = 884;\n context.fillStyle = \"rgba(255, 255, 255, 0.12)\";\n drawRoundedRect(context, progressX, progressY, 408, 18, 9);\n context.fill();\n const progressGradient = context.createLinearGradient(progressX, 0, progressX + 360, 0);\n progressGradient.addColorStop(0, \"#e1e1e1\");\n progressGradient.addColorStop(1, \"#a8a8a8\");\n context.fillStyle = progressGradient;\n drawRoundedRect(context, progressX, progressY, 286, 18, 9);\n context.fill();\n\n context.fillStyle = \"rgba(255, 255, 255, 0.6)\";\n context.font = '500 20px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(\"200 PTS = GBP 10 REWARD\", 56, 946);\n }\n\n const texture = new THREE.CanvasTexture(textureCanvas);\n if (\"colorSpace\" in texture && THREE.SRGBColorSpace) texture.colorSpace = THREE.SRGBColorSpace;\n texture.anisotropy = 4;\n texture.needsUpdate = true;\n\n return texture;\n };\n\n const createPhoneGlassTexture = (THREE) => {\n const textureCanvas = document.createElement(\"canvas\");\n textureCanvas.width = 520;\n textureCanvas.height = 1040;\n const context = textureCanvas.getContext(\"2d\");\n\n context.clearRect(0, 0, 520, 1040);\n const glassSweep = context.createLinearGradient(0, 0, 520, 1040);\n glassSweep.addColorStop(0, \"rgba(255, 255, 255, 0.18)\");\n glassSweep.addColorStop(.14, \"rgba(255, 255, 255, 0.035)\");\n glassSweep.addColorStop(.32, \"rgba(255, 255, 255, 0)\");\n glassSweep.addColorStop(.72, \"rgba(255, 255, 255, 0.045)\");\n glassSweep.addColorStop(1, \"rgba(255, 255, 255, 0)\");\n context.fillStyle = glassSweep;\n context.fillRect(0, 0, 520, 1040);\n\n const edgeShade = context.createRadialGradient(260, 520, 180, 260, 520, 620);\n edgeShade.addColorStop(0, \"rgba(0, 0, 0, 0)\");\n edgeShade.addColorStop(1, \"rgba(0, 0, 0, 0.2)\");\n context.fillStyle = edgeShade;\n context.fillRect(0, 0, 520, 1040);\n\n const texture = new THREE.CanvasTexture(textureCanvas);\n if (\"colorSpace\" in texture && THREE.SRGBColorSpace) texture.colorSpace = THREE.SRGBColorSpace;\n texture.anisotropy = 4;\n texture.needsUpdate = true;\n\n return texture;\n };\n\n const createLoyaltyPhonePanelTexture = (THREE, panel) => {\n const textureCanvas = document.createElement(\"canvas\");\n textureCanvas.width = 640;\n textureCanvas.height = 900;\n const context = textureCanvas.getContext(\"2d\");\n const panelGradient = context.createLinearGradient(0, 0, 640, 900);\n\n panelGradient.addColorStop(0, \"#202020\");\n panelGradient.addColorStop(.5, \"#0d0d0d\");\n panelGradient.addColorStop(1, \"#050505\");\n context.fillStyle = panelGradient;\n context.fillRect(0, 0, 640, 900);\n\n context.strokeStyle = \"rgba(218, 218, 218, 0.18)\";\n context.lineWidth = 2;\n drawRoundedRect(context, 24, 24, 592, 852, 44);\n context.stroke();\n\n context.fillStyle = \"rgba(218, 218, 218, 0.92)\";\n context.font = '600 24px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(panel.eyebrow || \"LEGACY PAGE\", 56, 96);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.98)\";\n context.font = '600 66px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(panel.title || \"LEGACY\", 56, 174);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.62)\";\n context.font = '500 24px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n wrapCanvasText(context, panel.body || \"\", 58, 230, 520, 34, 3);\n\n const rows = panel.rows || [];\n\n rows.forEach(([label, value], index) => {\n const rowY = 390 + index * 106;\n\n context.fillStyle = \"rgba(255, 255, 255, 0.055)\";\n drawRoundedRect(context, 52, rowY - 62, 536, 82, 24);\n context.fill();\n context.strokeStyle = \"rgba(218, 218, 218, 0.13)\";\n context.stroke();\n\n context.fillStyle = \"rgba(218, 218, 218, 0.78)\";\n context.font = '600 18px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(label, 78, rowY - 28);\n\n context.fillStyle = \"rgba(255, 255, 255, 0.95)\";\n context.font = '600 30px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(value, 78, rowY + 10);\n });\n\n context.fillStyle = \"rgba(255, 255, 255, 0.5)\";\n context.font = '500 20px \"Swiss 721\", \"Helvetica Neue\", Arial, sans-serif';\n context.fillText(panel.footer || \"SCROLL TO OPEN NEXT PART\", 56, 810);\n\n const texture = new THREE.CanvasTexture(textureCanvas);\n if (\"colorSpace\" in texture && THREE.SRGBColorSpace) texture.colorSpace = THREE.SRGBColorSpace;\n texture.anisotropy = 4;\n texture.needsUpdate = true;\n\n return texture;\n };\n\n const createRoundedPhoneShape = (THREE, width, height, radius) => {\n const shape = new THREE.Shape();\n const x = -width / 2;\n const y = -height / 2;\n const r = Math.min(radius, width / 2, height / 2);\n\n shape.moveTo(x + r, y);\n shape.lineTo(x + width - r, y);\n shape.quadraticCurveTo(x + width, y, x + width, y + r);\n shape.lineTo(x + width, y + height - r);\n shape.quadraticCurveTo(x + width, y + height, x + width - r, y + height);\n shape.lineTo(x + r, y + height);\n shape.quadraticCurveTo(x, y + height, x, y + height - r);\n shape.lineTo(x, y + r);\n shape.quadraticCurveTo(x, y, x + r, y);\n\n return shape;\n };\n\n const normalizePhoneGeometryUv = (THREE, geometry) => {\n geometry.computeBoundingBox();\n\n const box = geometry.boundingBox;\n if (!box) return geometry;\n\n const position = geometry.attributes.position;\n const width = box.max.x - box.min.x || 1;\n const height = box.max.y - box.min.y || 1;\n const uvs = [];\n\n for (let index = 0; index < position.count; index += 1) {\n uvs.push(\n (position.getX(index) - box.min.x) / width,\n (position.getY(index) - box.min.y) / height\n );\n }\n\n geometry.setAttribute(\"uv\", new THREE.Float32BufferAttribute(uvs, 2));\n geometry.attributes.uv.needsUpdate = true;\n\n return geometry;\n };\n\n const initLoyaltyInterface = () => {\n document.querySelectorAll(\"[data-hcx-loyalty-program]\").forEach((section) => {\n if (section.dataset.hcxLegacyInterfaceBound === \"true\") return;\n\n const isMobileLegacyTabs = window.matchMedia(\"(max-width: 749px)\").matches;\n if (isMobileLegacyTabs) {\n section.dataset.hcxLegacyMobileTabs = \"true\";\n section.classList.add(\"hcx-legacy-mobile-tabs-mode\", \"hcx-legacy-mobile-pages-mode\");\n html.classList.add(\"hcx-legacy-mobile-snap\");\n }\n\n const phoneStage = section.querySelector(\":scope > .hcx-loyalty-phone-stage\");\n const hero = section.querySelector(\":scope > .hcx-loyalty-program__hero\");\n const system = section.querySelector(\":scope > .hcx-loyalty-program__system\");\n const earn = section.querySelector(\":scope > .hcx-loyalty-earn\");\n const body = section.querySelector(\":scope > .hcx-loyalty-program__body\");\n const tiers = body?.querySelector(\".hcx-loyalty-tiers\");\n const review = section.querySelector(\":scope > .hcx-loyalty-review-panel\");\n const joy = section.querySelector(\":scope > .hcx-loyalty-joy\");\n const ordersPanel = section.querySelector(\":scope > .hcx-legacy-orders-panel\");\n const tracking = ordersPanel?.querySelector(\"[data-hcx-tracking-hub]\") || section.querySelector(\":scope > .hcx-tracking-hub\");\n\n if (!phoneStage || !hero || !system || !earn || !tiers || !review) return;\n\n section.dataset.hcxLegacyInterfaceBound = \"true\";\n section.dataset.hcxLoyaltyInterface = \"true\";\n section.classList.add(\"hcx-legacy-interface\", \"hcx-legacy-flyouts\");\n\n const pointsText = section.querySelector(\".hcx-loyalty-profile > strong\")?.textContent.trim() || \"0\";\n const tierText = section.querySelector(\".hcx-loyalty-profile__topline em\")?.textContent.trim() || \"Athlete\";\n const pointsPerPound = Number(section.dataset.hcxPointsPerPound || 1);\n const tierCount = tiers.querySelectorAll(\".hcx-loyalty-tier\").length || 7;\n const ordersSummary = tracking?.dataset.hcxTrackingSummary || \"Track and return\";\n const spendUnitText = `${pointsPerPound} / \\u00a31`;\n\n const createElement = (tag, className, text) => {\n const element = document.createElement(tag);\n if (className) element.className = className;\n if (text) element.textContent = text;\n return element;\n };\n\n const createPanelHeader = (kicker, title, copy) => {\n const header = createElement(\"div\", \"hcx-legacy-panel__header\");\n const titleBlock = createElement(\"div\");\n const kickerNode = createElement(\"p\", \"hcx-kicker\", kicker);\n const titleNode = createElement(\"h2\", \"\", title);\n\n titleBlock.append(kickerNode, titleNode);\n header.append(titleBlock);\n if (copy) header.append(createElement(\"p\", \"\", copy));\n\n return header;\n };\n\n const stage = createElement(\"div\", \"hcx-legacy-stage\");\n stage.dataset.hcxLegacyStage = \"\";\n const rockfield = createElement(\"div\", \"hcx-legacy-rockfield\");\n rockfield.setAttribute(\"aria-hidden\", \"true\");\n Array.from({ length: 16 }).forEach((_, index) => {\n const rock = createElement(\"span\", \"hcx-legacy-rockfield__rock\");\n rock.dataset.hcxLegacyRock = String(index);\n rockfield.append(rock);\n });\n const sticky = createElement(\"div\", \"hcx-legacy-stage__sticky\");\n const phoneColumn = createElement(\"aside\", \"hcx-legacy-phone-column\");\n phoneColumn.setAttribute(\"aria-label\", \"Legacy phone controller\");\n const notificationLink = createElement(\"a\", \"hcx-legacy-order-notification-link\");\n notificationLink.dataset.hcxOrderNotificationLink = \"\";\n notificationLink.href = \"/collections/all\";\n notificationLink.textContent = \"Open product\";\n notificationLink.setAttribute(\"aria-label\", \"Open product from order notification\");\n notificationLink.hidden = true;\n const detail = createElement(\"div\", \"hcx-legacy-detail\");\n detail.dataset.hcxLegacyDetail = \"\";\n const progress = createElement(\"div\", \"hcx-legacy-progress\");\n progress.setAttribute(\"aria-hidden\", \"true\");\n const progressLabel = createElement(\"span\", \"\", \"01 / WELCOME\");\n progressLabel.setAttribute(\"data-hcx-preserve-case\", \"\");\n progressLabel.dataset.hcxLegacyProgressLabel = \"\";\n const progressTrack = createElement(\"i\");\n const progressBar = createElement(\"b\");\n progressBar.dataset.hcxLegacyProgressBar = \"\";\n\n progressTrack.append(progressBar);\n progress.append(progressLabel, progressTrack);\n detail.append(progress);\n\n const tabData = [\n [\"Welcome\", tierText, \"hcx-legacy-panel-profile\"],\n [\"Points\", spendUnitText, \"hcx-legacy-panel-points\"],\n ...(joy ? [[\"Redeem\", \"Coupons\", \"hcx-legacy-panel-redeem\"]] : []),\n [\"Tiers\", `${tierCount} tiers`, \"hcx-legacy-panel-tiers\"],\n ...(ordersPanel ? [[\"Orders\", ordersSummary, \"hcx-legacy-panel-orders\"]] : []),\n ];\n\n const phoneHotspots = createElement(\"div\", \"hcx-legacy-phone-hotspots\");\n phoneHotspots.setAttribute(\"aria-label\", \"Legacy phone screens\");\n phoneHotspots.setAttribute(\"role\", \"tablist\");\n tabData.forEach(([label, , panelId], index) => {\n const button = createElement(\"button\", \"hcx-legacy-phone-hotspot\");\n button.type = \"button\";\n button.dataset.hcxLoyaltyTab = String(index);\n button.dataset.hcxPhoneHotspot = label;\n button.style.setProperty(\"--hcx-phone-hotspot-top\", `${26.9 + index * 8.94}%`);\n button.setAttribute(\"aria-controls\", panelId);\n button.setAttribute(\"aria-label\", `Show ${label}`);\n button.setAttribute(\"aria-selected\", index === 0 ? \"true\" : \"false\");\n button.setAttribute(\"role\", \"tab\");\n phoneHotspots.append(button);\n });\n\n const mobileTabs = createElement(\"div\", \"hcx-legacy-mobile-tabs\");\n mobileTabs.setAttribute(\"aria-label\", \"Legacy sections\");\n mobileTabs.setAttribute(\"role\", \"tablist\");\n tabData.forEach(([label, meta, panelId], index) => {\n const button = createElement(\"button\");\n button.type = \"button\";\n button.dataset.hcxLoyaltyTab = String(index);\n button.setAttribute(\"aria-controls\", panelId);\n button.setAttribute(\"aria-selected\", index === 0 ? \"true\" : \"false\");\n button.setAttribute(\"role\", \"tab\");\n button.append(createElement(\"span\", \"\", label), createElement(\"strong\", \"\", meta));\n mobileTabs.append(button);\n });\n\n phoneColumn.append(phoneStage, phoneHotspots, notificationLink);\n\n const panels = [\n {\n id: \"hcx-legacy-panel-profile\",\n modifier: \"profile\",\n nodes: [hero],\n title: \"Welcome\",\n },\n {\n header: createPanelHeader(\n \"Points\",\n \"Earn. Redeem. Repeat.\",\n `Every paid order earns ${spendUnitText}. Convert points into vouchers and use them at checkout.`\n ),\n id: \"hcx-legacy-panel-points\",\n nodes: [system],\n title: \"Points\",\n },\n ...(joy ? [{\n header: createPanelHeader(\n \"Redeem\",\n \"Get coupons.\",\n \"Turn points into checkout coupons. Open coupons to claim what is available on your account.\"\n ),\n id: \"hcx-legacy-panel-redeem\",\n modifier: \"redeem\",\n nodes: [joy],\n title: \"Redeem\",\n }] : []),\n {\n header: createPanelHeader(\n \"Tiers\",\n \"Your Legacy path.\",\n \"Move up automatically as your lifetime spend grows.\"\n ),\n id: \"hcx-legacy-panel-tiers\",\n nodes: [tiers],\n title: \"Tiers\",\n },\n ];\n if (ordersPanel) {\n panels.push({\n id: \"hcx-legacy-panel-orders\",\n header: createPanelHeader(\n \"Orders\",\n \"Orders in one place.\",\n \"Track fulfilment, open order details and start a return or exchange when needed.\"\n ),\n nodes: [ordersPanel, review],\n title: \"Orders\",\n });\n }\n section.dataset.hcxPanelCount = String(panels.length);\n\n panels.forEach((panel, index) => {\n const article = createElement(\"article\", `hcx-legacy-panel${panel.modifier ? ` hcx-legacy-panel--${panel.modifier}` : \"\"}`);\n article.id = panel.id;\n article.dataset.hcxLoyaltyPanel = String(index);\n article.tabIndex = -1;\n if (index === 0) {\n article.classList.add(\"is-active\");\n } else if (!isMobileLegacyTabs) {\n article.setAttribute(\"aria-hidden\", \"true\");\n }\n if (panel.header) article.append(panel.header);\n panel.nodes.forEach((node) => article.append(node));\n detail.append(article);\n });\n\n if (body && !body.children.length) body.remove();\n\n const scrollSteps = createElement(\"div\", \"hcx-legacy-scroll-steps\");\n scrollSteps.setAttribute(\"aria-hidden\", \"true\");\n panels.forEach((_, index) => {\n const step = createElement(\"span\");\n step.dataset.hcxLoyaltyTabStep = String(index);\n scrollSteps.append(step);\n });\n\n sticky.append(rockfield, phoneColumn, mobileTabs, detail);\n stage.append(sticky, scrollSteps);\n section.prepend(stage);\n\n const reviewTargetPanelId = ordersPanel ? \"hcx-legacy-panel-orders\" : \"hcx-legacy-panel-points\";\n const reviewTargetPanelIndex = panels.findIndex((panel) => panel.id === reviewTargetPanelId);\n section.querySelectorAll('a[href=\"#review-reward\"]').forEach((link) => {\n link.dataset.hcxLoyaltyTab = String(reviewTargetPanelIndex >= 0 ? reviewTargetPanelIndex : 1);\n link.setAttribute(\"href\", `#${reviewTargetPanelId}`);\n link.setAttribute(\"role\", \"button\");\n });\n\n const panelElements = Array.from(section.querySelectorAll(\"[data-hcx-loyalty-panel]\"));\n const steps = Array.from(section.querySelectorAll(\"[data-hcx-loyalty-tab-step]\"));\n const panelCount = Math.max(panelElements.length, 1);\n stage.style.setProperty(\"--hcx-legacy-stage-height\", `${Math.max(panelCount * 112, 520)}vh`);\n scrollSteps.style.gridTemplateRows = `repeat(${panelCount}, minmax(0, 1fr))`;\n const ordersPanelIndex = panelElements.findIndex((panel) => panel.id === \"hcx-legacy-panel-orders\");\n section.querySelectorAll('a[href=\"#legacy-orders\"]').forEach((link) => {\n if (ordersPanelIndex < 0) return;\n link.dataset.hcxLoyaltyTab = String(ordersPanelIndex);\n link.setAttribute(\"href\", \"#hcx-legacy-panel-orders\");\n link.setAttribute(\"role\", \"button\");\n });\n const tabButtons = Array.from(section.querySelectorAll(\"[data-hcx-loyalty-tab]\"));\n const rocks = Array.from(rockfield.querySelectorAll(\"[data-hcx-legacy-rock]\")).map((rock, index) => ({\n node: rock,\n x: [-38, 22, 56, -18, 44, -64, 78, 8, -82, 68, -8, 34, -52, 88, -72, 62][index] || 0,\n y: [-24, 18, -42, 36, 28, -8, 54, -36, 46, -18, 64, -54, 12, 36, -30, 48][index] || 0,\n r: [-7, 10, -14, 8, -4, 13, -10, 6, -12, 14, -6, 9, -8, 11, -10, 12][index] || 0,\n }));\n let activeIndex = -1;\n let ticking = false;\n let programmaticScrollIndex = null;\n let programmaticScrollTimer = null;\n let programmaticScrollFrame = null;\n let hashPanelLockIndex = null;\n let hashPanelLockScrollY = 0;\n let wheelLocked = false;\n let wheelLockTimer = null;\n let touchStartX = 0;\n let touchStartY = 0;\n let touchSnapStarted = false;\n let mobileHeightFrame = null;\n let mobileHeightTimer = null;\n\n const isCompactLegacyViewport = () => window.matchMedia(\"(max-width: 749px)\").matches;\n\n const syncLegacyMobileMode = () => {\n const isCompact = isCompactLegacyViewport();\n section.dataset.hcxLegacyMobileTabs = isCompact ? \"true\" : \"false\";\n section.classList.toggle(\"hcx-legacy-mobile-tabs-mode\", isCompact);\n section.classList.toggle(\"hcx-legacy-mobile-pages-mode\", isCompact);\n html.classList.toggle(\"hcx-legacy-mobile-snap\", isCompact && document.body.classList.contains(\"hcx-legacy-page\"));\n\n panelElements.forEach((panel) => {\n const panelIndex = Number(panel.dataset.hcxLoyaltyPanel);\n if (isCompact) {\n panel.removeAttribute(\"aria-hidden\");\n } else {\n panel.toggleAttribute(\"aria-hidden\", activeIndex >= 0 && panelIndex !== activeIndex);\n }\n });\n\n return isCompact;\n };\n\n const clearMobilePanelHeight = () => {\n [section, stage, sticky].forEach((node) => {\n node.style.removeProperty(\"height\");\n node.style.removeProperty(\"min-height\");\n });\n delete section.dataset.hcxLegacyMobileHeight;\n };\n\n const syncMobilePanelHeight = () => {\n if (!isCompactLegacyViewport()) {\n clearMobilePanelHeight();\n return;\n }\n\n const lastPanel = panelElements[panelElements.length - 1];\n if (!lastPanel) return;\n\n const stickyStyles = window.getComputedStyle(sticky);\n const paddingTop = parseFloat(stickyStyles.paddingTop) || 0;\n const paddingBottom = parseFloat(stickyStyles.paddingBottom) || 0;\n const panelBottoms = panelElements.map((panel) => {\n const panelRect = panel.getBoundingClientRect();\n const detailRect = detail.getBoundingClientRect();\n return Math.max(0, panelRect.bottom - detailRect.top);\n });\n const detailHeight = Math.max(\n detail.scrollHeight || 0,\n detail.offsetHeight || 0,\n detail.getBoundingClientRect().height || 0,\n ...panelBottoms\n );\n const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 1;\n const nextHeight = Math.ceil(Math.max(viewportHeight, paddingTop + detailHeight + paddingBottom));\n\n [section, stage, sticky].forEach((node) => {\n node.style.setProperty(\"height\", `${nextHeight}px`, \"important\");\n node.style.setProperty(\"min-height\", `${nextHeight}px`, \"important\");\n });\n section.dataset.hcxLegacyMobileHeight = String(nextHeight);\n };\n\n const queueMobilePanelHeight = () => {\n if (mobileHeightFrame !== null) {\n window.cancelAnimationFrame(mobileHeightFrame);\n mobileHeightFrame = null;\n }\n window.clearTimeout(mobileHeightTimer);\n\n mobileHeightFrame = window.requestAnimationFrame(() => {\n mobileHeightFrame = null;\n syncMobilePanelHeight();\n });\n mobileHeightTimer = window.setTimeout(syncMobilePanelHeight, 220);\n };\n\n const updateRockfield = (progressValue) => {\n const panelTravel = Math.max(panelElements.length - 1, 1);\n const tabProgress = clampValue(progressValue, 0, 1) * panelTravel;\n\n section.style.setProperty(\"--hcx-rock-phase\", tabProgress.toFixed(3));\n section.style.setProperty(\"--hcx-rock-pane-a-x\", `${(-1.2 * tabProgress).toFixed(2)}rem`);\n section.style.setProperty(\"--hcx-rock-pane-a-y\", `${(.25 * tabProgress).toFixed(2)}rem`);\n section.style.setProperty(\"--hcx-rock-pane-b-x\", `${(1 * tabProgress).toFixed(2)}rem`);\n section.style.setProperty(\"--hcx-rock-pane-b-y\", `${(-.45 * tabProgress).toFixed(2)}rem`);\n rocks.forEach(({ node, x, y, r }, index) => {\n const sway = Math.sin((tabProgress * .92 + index * .63) * Math.PI) * 5.5;\n node.style.setProperty(\"--hcx-rock-x\", `${(tabProgress * x + sway).toFixed(2)}px`);\n node.style.setProperty(\"--hcx-rock-y\", `${(tabProgress * y + Math.cos(tabProgress + index) * 3.4).toFixed(2)}px`);\n node.style.setProperty(\"--hcx-rock-r\", `${(tabProgress * r).toFixed(2)}deg`);\n });\n };\n\n const setActive = (index, shouldFocus = false) => {\n const nextIndex = clampValue(index, 0, panelElements.length - 1);\n if (nextIndex === activeIndex) {\n queueMobilePanelHeight();\n if (shouldFocus) panelElements[nextIndex]?.focus({ preventScroll: true });\n return;\n }\n\n activeIndex = nextIndex;\n const stackedMobile = isCompactLegacyViewport();\n updateRockfield(nextIndex / Math.max(panelElements.length - 1, 1));\n\n tabButtons.forEach((button) => {\n const isActive = Number(button.dataset.hcxLoyaltyTab) === nextIndex;\n button.classList.toggle(\"is-active\", isActive);\n if (button.matches(\".hcx-legacy-phone-tabs button, .hcx-legacy-phone-hotspot, .hcx-legacy-mobile-tabs button\")) {\n button.setAttribute(\"aria-selected\", isActive ? \"true\" : \"false\");\n }\n });\n\n panelElements.forEach((panel) => {\n const panelIndex = Number(panel.dataset.hcxLoyaltyPanel);\n const isActive = panelIndex === nextIndex;\n const panelDelta = panelIndex - nextIndex;\n\n panel.style.setProperty(\"--hcx-panel-delta\", String(panelDelta));\n panel.classList.toggle(\"is-active\", isActive);\n panel.classList.toggle(\"is-before\", panelDelta < 0);\n panel.classList.toggle(\"is-after\", panelDelta > 0);\n if (stackedMobile) {\n panel.removeAttribute(\"aria-hidden\");\n } else {\n panel.toggleAttribute(\"aria-hidden\", !isActive);\n }\n });\n\n const label = tabData[nextIndex]?.[0] || \"Legacy\";\n progressLabel.textContent = `${String(nextIndex + 1).padStart(2, \"0\")} / ${label.toUpperCase()}`;\n progressBar.style.transform = `scaleX(${(nextIndex + 1) / panelElements.length})`;\n section.dataset.hcxLegacyActivePanel = String(nextIndex + 1);\n section.style.setProperty(\"--hcx-active-panel\", String(nextIndex));\n queueMobilePanelHeight();\n\n if (shouldFocus) panelElements[nextIndex]?.focus({ preventScroll: true });\n };\n\n const getStageMetrics = () => {\n const rect = stage.getBoundingClientRect();\n const viewport = window.innerHeight || document.documentElement.clientHeight || 1;\n const travel = Math.max(stage.offsetHeight - viewport, viewport * Math.max(panelElements.length - 1, 1));\n\n return {\n rect,\n viewport,\n travel,\n top: window.scrollY + rect.top,\n };\n };\n\n const getStageProgress = () => {\n const { rect, travel } = getStageMetrics();\n\n return clampValue((0 - rect.top) / travel, 0, .999);\n };\n\n const getMobilePanelViewportOffset = () => {\n const header = document.querySelector(\".section-header\");\n const headerHeight = header?.getBoundingClientRect?.().height || 0;\n const tabsRect = mobileTabs.getBoundingClientRect();\n const tabsBottom = tabsRect.height ? tabsRect.bottom : headerHeight + 64;\n const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 1;\n\n return Math.round(Math.min(Math.max(tabsBottom + 12, headerHeight + 24), Math.max(112, viewportHeight * .3)));\n };\n\n const getNearestMobilePanelIndex = () => {\n const offset = getMobilePanelViewportOffset();\n let nearestIndex = activeIndex >= 0 ? activeIndex : 0;\n let nearestDistance = Number.POSITIVE_INFINITY;\n\n panelElements.forEach((panel) => {\n const panelIndex = Number(panel.dataset.hcxLoyaltyPanel);\n const rect = panel.getBoundingClientRect();\n const distance = Math.abs(rect.top - offset);\n const containsOffset = rect.top <= offset + 24 && rect.bottom >= offset + 24;\n const weightedDistance = containsOffset ? distance * .35 : distance;\n\n if (weightedDistance < nearestDistance) {\n nearestDistance = weightedDistance;\n nearestIndex = panelIndex;\n }\n });\n\n return clampValue(nearestIndex, 0, panelElements.length - 1);\n };\n\n const scrollToPanel = (index, shouldFocus = false, behavior = \"smooth\") => {\n const nextIndex = clampValue(index, 0, panelElements.length - 1);\n const { top } = getStageMetrics();\n const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n if (isCompactLegacyViewport()) {\n const targetPanel = panelElements[nextIndex];\n\n window.clearTimeout(programmaticScrollTimer);\n if (programmaticScrollFrame !== null) {\n window.cancelAnimationFrame(programmaticScrollFrame);\n programmaticScrollFrame = null;\n }\n\n programmaticScrollIndex = nextIndex;\n setActive(nextIndex, shouldFocus);\n\n const scrollMobilePanelIntoView = (scrollBehavior = behavior) => {\n const panelTop = targetPanel\n ? window.scrollY + targetPanel.getBoundingClientRect().top - getMobilePanelViewportOffset()\n : top;\n\n window.scrollTo({\n behavior: reducedMotion ? \"auto\" : scrollBehavior,\n top: Math.max(0, panelTop),\n });\n };\n\n scrollMobilePanelIntoView(behavior);\n window.requestAnimationFrame(() => scrollMobilePanelIntoView(\"auto\"));\n window.setTimeout(() => {\n if (programmaticScrollIndex === nextIndex) scrollMobilePanelIntoView(\"auto\");\n }, 180);\n\n programmaticScrollTimer = window.setTimeout(() => {\n if (programmaticScrollIndex === nextIndex) {\n programmaticScrollIndex = null;\n requestSync();\n }\n }, reducedMotion ? 80 : 1050);\n return;\n }\n\n window.clearTimeout(programmaticScrollTimer);\n if (programmaticScrollFrame !== null) {\n window.cancelAnimationFrame(programmaticScrollFrame);\n programmaticScrollFrame = null;\n }\n\n programmaticScrollIndex = null;\n setActive(nextIndex, shouldFocus);\n panelElements[nextIndex]?.scrollTo?.({\n behavior: reducedMotion ? \"auto\" : behavior,\n top: 0,\n });\n };\n\n const getHashPanelViewportOffset = () => {\n if (isCompactLegacyViewport()) return getMobilePanelViewportOffset();\n\n const header = document.querySelector(\".section-header\");\n const headerHeight = header?.getBoundingClientRect?.().height || 0;\n\n return Math.min(Math.max(headerHeight + 18, 24), 116);\n };\n\n const scrollHashPanelIntoView = (index, shouldFocus = false, behavior = \"auto\") => {\n const nextIndex = clampValue(index, 0, panelElements.length - 1);\n const { travel, top } = getStageMetrics();\n\n hashPanelLockIndex = nextIndex;\n if (isCompactLegacyViewport()) {\n const targetPanel = panelElements[nextIndex];\n hashPanelLockScrollY = targetPanel\n ? Math.max(0, window.scrollY + targetPanel.getBoundingClientRect().top - getHashPanelViewportOffset())\n : top;\n } else {\n const targetStep = steps[nextIndex];\n hashPanelLockScrollY = targetStep\n ? window.scrollY + targetStep.getBoundingClientRect().top\n : top + travel * (nextIndex / Math.max(panelElements.length - 1, 1));\n }\n\n scrollToPanel(nextIndex, shouldFocus, behavior);\n };\n\n const getPanelIndexFromHash = (hash = \"\") => {\n const hashId = String(hash || \"\").replace(/^#/, \"\");\n if (!hashId) return -1;\n if (hashId === \"legacy-orders\") return ordersPanelIndex;\n\n const directPanelIndex = panelElements.findIndex((panel) => panel.id === hashId);\n if (directPanelIndex >= 0) return directPanelIndex;\n\n const anchorTarget = document.getElementById(hashId);\n const anchorPanel = anchorTarget?.closest?.(\"[data-hcx-loyalty-panel]\");\n if (!anchorPanel || !section.contains(anchorPanel)) return -1;\n\n const anchorPanelIndex = Number(anchorPanel.dataset.hcxLoyaltyPanel);\n return Number.isFinite(anchorPanelIndex) ? anchorPanelIndex : -1;\n };\n\n const clearPanelHashLock = () => {\n if (getPanelIndexFromHash(window.location.hash) < 0) return;\n\n hashPanelLockIndex = null;\n if (window.history?.replaceState) {\n window.history.replaceState(window.history.state, \"\", `${window.location.pathname}${window.location.search}`);\n }\n };\n\n const openHashPanel = (hash = window.location.hash, behavior = \"auto\") => {\n const requestedHash = String(hash || \"\");\n const hashPanelIndex = getPanelIndexFromHash(hash);\n if (hashPanelIndex < 0) return false;\n\n scrollHashPanelIntoView(hashPanelIndex, true, behavior);\n [140, 520, 1200, 2200].forEach((delay) => {\n window.setTimeout(() => {\n if (requestedHash && window.location.hash !== requestedHash) return;\n const targetPanel = panelElements[hashPanelIndex];\n const panelRect = targetPanel?.getBoundingClientRect();\n const isUsable =\n targetPanel?.classList.contains(\"is-active\") &&\n panelRect &&\n panelRect.bottom > getHashPanelViewportOffset() + 48 &&\n panelRect.top < (window.innerHeight || document.documentElement.clientHeight || 1) - 48;\n if (isUsable) return;\n\n scrollHashPanelIntoView(hashPanelIndex, false, \"auto\");\n }, delay);\n });\n return true;\n };\n\n const syncFromScroll = () => {\n ticking = false;\n if (isCompactLegacyViewport()) {\n syncLegacyMobileMode();\n const nextIndex = getNearestMobilePanelIndex();\n const progressValue = nextIndex / Math.max(panelElements.length - 1, 1);\n\n section.dataset.hcxLegacyScroll = progressValue.toFixed(3);\n updateRockfield(progressValue);\n if (programmaticScrollIndex === null && nextIndex !== activeIndex) setActive(nextIndex);\n return;\n }\n\n if (hashPanelLockIndex !== null && activeIndex !== hashPanelLockIndex) {\n setActive(hashPanelLockIndex);\n }\n };\n\n const requestSync = () => {\n if (ticking) return;\n ticking = true;\n window.requestAnimationFrame(syncFromScroll);\n };\n\n const getWheelScrollContext = (target, clientX, clientY) => {\n if (!(target instanceof Element)) return null;\n\n const activePanelFromTarget = target.closest(\".hcx-legacy-panel.is-active\");\n const activePanel = activePanelFromTarget || section.querySelector(\".hcx-legacy-panel.is-active\");\n if (!activePanel || !detail.contains(activePanel)) return null;\n\n if (!isCompactLegacyViewport()) {\n const stickyRect = sticky.getBoundingClientRect();\n const isPointerOverStage =\n clientX >= stickyRect.left &&\n clientX <= stickyRect.right &&\n clientY >= stickyRect.top &&\n clientY <= stickyRect.bottom;\n if (!isPointerOverStage) return null;\n\n const detailRect = detail.getBoundingClientRect();\n const isPointerOverDetail =\n clientX >= detailRect.left &&\n clientX <= detailRect.right &&\n clientY >= detailRect.top &&\n clientY <= detailRect.bottom;\n if (!isPointerOverDetail && !detail.contains(target)) return null;\n\n let desktopNode = activePanel.contains(target) ? target : activePanel;\n while (desktopNode && desktopNode !== stage) {\n const style = window.getComputedStyle(desktopNode);\n const canScrollY = /(auto|scroll|overlay)/.test(style.overflowY) && desktopNode.scrollHeight > desktopNode.clientHeight + 2;\n\n if (canScrollY) {\n return {\n allowPageAtBoundary: false,\n capturesWheel: true,\n scrollNode: desktopNode,\n };\n }\n if (desktopNode === activePanel) break;\n\n desktopNode = desktopNode.parentElement;\n }\n\n return {\n allowPageAtBoundary: false,\n capturesWheel: true,\n scrollNode: activePanel.scrollHeight > activePanel.clientHeight + 2 ? activePanel : null,\n };\n }\n\n const panelRect = activePanel.getBoundingClientRect();\n const isPointerOverPanel = clientX >= panelRect.left && clientX <= panelRect.right && clientY >= panelRect.top && clientY <= panelRect.bottom;\n if (!activePanelFromTarget && !isPointerOverPanel) return null;\n\n let node = activePanel.contains(target) ? target : activePanel;\n\n while (node && node !== stage) {\n const style = window.getComputedStyle(node);\n const canScrollY = /(auto|scroll|overlay)/.test(style.overflowY) && node.scrollHeight > node.clientHeight + 2;\n\n if (canScrollY) return { capturesWheel: true, scrollNode: node };\n if (node === activePanel) break;\n\n node = node.parentElement;\n }\n\n return { capturesWheel: true, scrollNode: activePanel.scrollHeight > activePanel.clientHeight + 2 ? activePanel : null };\n };\n\n const scrollNestedPanel = (target, delta, clientX, clientY) => {\n const scrollContext = getWheelScrollContext(target, clientX, clientY);\n if (!scrollContext) return false;\n if (!scrollContext.capturesWheel) return false;\n\n const scrollNode = scrollContext.scrollNode;\n if (!scrollNode) return !scrollContext.allowPageAtBoundary;\n\n const maxScrollTop = Math.max(0, scrollNode.scrollHeight - scrollNode.clientHeight);\n const nextScrollTop = clampValue(scrollNode.scrollTop + delta, 0, maxScrollTop);\n const canScrollDown = delta > 0 && scrollNode.scrollTop < maxScrollTop - 2;\n const canScrollUp = delta < 0 && scrollNode.scrollTop > 2;\n\n if (!canScrollDown && !canScrollUp) return !scrollContext.allowPageAtBoundary;\n\n scrollNode.scrollTop = nextScrollTop;\n return true;\n };\n\n const stepPanelFromDelta = (delta) => {\n if (isCompactLegacyViewport()) {\n const direction = delta > 0 ? 1 : -1;\n const baseIndex = activeIndex >= 0 ? activeIndex : getNearestMobilePanelIndex();\n const nextIndex = baseIndex + direction;\n if (nextIndex < 0 || nextIndex >= panelElements.length) return false;\n if (wheelLocked) return true;\n\n window.clearTimeout(wheelLockTimer);\n wheelLocked = true;\n clearPanelHashLock();\n scrollToPanel(nextIndex, false, \"smooth\");\n wheelLockTimer = window.setTimeout(() => {\n wheelLocked = false;\n }, window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? 140 : 980);\n\n return true;\n }\n\n const { rect, viewport } = getStageMetrics();\n const isPinned = rect.top <= 8 && rect.bottom >= viewport - 8;\n if (!isPinned) return false;\n\n const direction = delta > 0 ? 1 : -1;\n const nextIndex = activeIndex + direction;\n if (nextIndex < 0 || nextIndex >= panelElements.length) return false;\n if (wheelLocked) return true;\n\n window.clearTimeout(wheelLockTimer);\n wheelLocked = true;\n clearPanelHashLock();\n scrollToPanel(nextIndex, false);\n wheelLockTimer = window.setTimeout(() => {\n wheelLocked = false;\n }, window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? 120 : 280);\n\n return true;\n };\n\n section.addEventListener(\"click\", (event) => {\n const trigger = event.target.closest(\"[data-hcx-loyalty-tab]\");\n if (!trigger || !section.contains(trigger)) return;\n\n event.preventDefault();\n const index = Number(trigger.dataset.hcxLoyaltyTab || 0);\n const hash = trigger instanceof HTMLAnchorElement ? trigger.hash : \"\";\n\n if (!hash) clearPanelHashLock();\n scrollToPanel(index, true);\n\n if (hash.length > 1) {\n const anchorTarget = document.getElementById(hash.slice(1));\n if (!anchorTarget || !section.contains(anchorTarget)) return;\n\n const scrollActivePanelToAnchor = () => {\n const activePanel = anchorTarget.closest(\".hcx-legacy-panel\");\n if (!activePanel) return;\n\n let offset = 0;\n let offsetNode = anchorTarget;\n\n while (offsetNode instanceof HTMLElement && offsetNode !== activePanel) {\n offset += offsetNode.offsetTop || 0;\n offsetNode = offsetNode.offsetParent;\n\n if (offsetNode && offsetNode !== activePanel && !activePanel.contains(offsetNode)) {\n offsetNode = null;\n break;\n }\n }\n\n if (offsetNode !== activePanel) {\n const panelRect = activePanel.getBoundingClientRect();\n const targetRect = anchorTarget.getBoundingClientRect();\n offset = targetRect.top - panelRect.top + activePanel.scrollTop;\n }\n\n activePanel.scrollTop = Math.max(0, offset - 24);\n };\n\n [60, 180, 420].forEach((delay) => {\n window.setTimeout(scrollActivePanelToAnchor, delay);\n });\n }\n });\n\n stage.addEventListener(\n \"wheel\",\n (event) => {\n const delta = Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;\n if (Math.abs(delta) < 7) return;\n if (isCompactLegacyViewport()) return;\n\n if (!isCompactLegacyViewport() && scrollNestedPanel(event.target, delta, event.clientX, event.clientY)) {\n event.preventDefault();\n return;\n }\n\n if (!stepPanelFromDelta(delta)) return;\n event.preventDefault();\n },\n { passive: false }\n );\n\n stage.addEventListener(\n \"touchstart\",\n (event) => {\n const touch = event.touches?.[0];\n if (!touch) return;\n\n touchStartX = touch.clientX;\n touchStartY = touch.clientY;\n touchSnapStarted = false;\n },\n { passive: true }\n );\n\n stage.addEventListener(\n \"touchmove\",\n (event) => {\n const touch = event.touches?.[0];\n if (!touch) return;\n\n const deltaX = touch.clientX - touchStartX;\n const deltaY = touch.clientY - touchStartY;\n\n if (isCompactLegacyViewport()) {\n return;\n }\n\n if (Math.abs(deltaY) < 34 || Math.abs(deltaY) < Math.abs(deltaX) * 1.2) return;\n\n if (!stepPanelFromDelta(deltaY > 0 ? -1 : 1)) return;\n event.preventDefault();\n touchStartX = touch.clientX;\n touchStartY = touch.clientY;\n },\n { passive: false }\n );\n\n stage.addEventListener(\n \"touchend\",\n () => {\n touchSnapStarted = false;\n },\n { passive: true }\n );\n\n stage.addEventListener(\n \"touchcancel\",\n () => {\n touchSnapStarted = false;\n },\n { passive: true }\n );\n\n window.addEventListener(\n \"keydown\",\n (event) => {\n if (!isCompactLegacyViewport()) return;\n if (event.defaultPrevented) return;\n\n const target = event.target;\n const isEditable =\n target instanceof HTMLElement &&\n (target.isContentEditable || /^(INPUT|SELECT|TEXTAREA|BUTTON)$/i.test(target.tagName));\n if (isEditable) return;\n\n const nextKeys = [\"ArrowDown\", \"PageDown\"];\n const previousKeys = [\"ArrowUp\", \"PageUp\"];\n const isSpace = event.key === \" \";\n let delta = 0;\n\n if (nextKeys.includes(event.key) || (isSpace && !event.shiftKey)) delta = 1;\n if (previousKeys.includes(event.key) || (isSpace && event.shiftKey)) delta = -1;\n if (!delta) return;\n\n if (!stepPanelFromDelta(delta)) return;\n event.preventDefault();\n },\n { passive: false }\n );\n\n if (\"ResizeObserver\" in window) {\n const mobilePanelResizeObserver = new ResizeObserver(() => {\n if (isCompactLegacyViewport()) queueMobilePanelHeight();\n });\n mobilePanelResizeObserver.observe(detail);\n panelElements.forEach((panel) => mobilePanelResizeObserver.observe(panel));\n }\n\n window.addEventListener(\"scroll\", () => {\n requestSync();\n }, { passive: true });\n window.addEventListener(\"resize\", () => {\n syncLegacyMobileMode();\n if (isCompactLegacyViewport()) {\n queueMobilePanelHeight();\n requestSync();\n return;\n }\n\n clearMobilePanelHeight();\n requestSync();\n });\n window.addEventListener(\"hashchange\", () => {\n openHashPanel(window.location.hash);\n });\n window.addEventListener(\"load\", () => {\n openHashPanel(window.location.hash, \"auto\");\n queueMobilePanelHeight();\n }, { once: true });\n\n syncLegacyMobileMode();\n if (!openHashPanel(window.location.hash, \"auto\")) setActive(0);\n queueMobilePanelHeight();\n requestSync();\n section.classList.add(\"is-legacy-interface-ready\");\n });\n };\n\n const initLegacyPopupGuard = () => {\n if (!document.body.classList.contains(\"hcx-legacy-page\")) return;\n if (document.body.dataset.hcxLegacyPopupGuard === \"true\") return;\n document.body.dataset.hcxLegacyPopupGuard = \"true\";\n\n const releasePopupScrollLock = () => {\n document.documentElement.classList.remove(\"klaviyo-prevent-body-scrolling\");\n document.body.classList.remove(\"klaviyo-prevent-body-scrolling\");\n\n if (document.body.style.overflow === \"hidden\") document.body.style.overflow = \"\";\n if (document.documentElement.style.overflow === \"hidden\") document.documentElement.style.overflow = \"\";\n if (document.body.style.position === \"fixed\") {\n document.body.style.position = \"\";\n document.body.style.top = \"\";\n document.body.style.width = \"\";\n }\n };\n\n const removePopupDialogs = () => {\n releasePopupScrollLock();\n document.querySelectorAll('[role=\"dialog\"][aria-label=\"POPUP Form\"]').forEach((dialog) => {\n if (!dialog.classList.contains(\"needsclick\") && !dialog.querySelector(\".klaviyo-form\")) return;\n dialog.remove();\n });\n releasePopupScrollLock();\n };\n\n removePopupDialogs();\n new MutationObserver(removePopupDialogs).observe(document.body, {\n attributes: true,\n attributeFilter: [\"class\", \"style\"],\n childList: true,\n subtree: true,\n });\n };\n\n const initKlaviyoLegacyPopupImage = () => {\n const popupImageUrl = window.HCX_KLAVIYO_POPUP_IMAGE_URL;\n if (html.dataset.hcxKlaviyoPopupImageBound === \"true\") return;\n\n html.dataset.hcxKlaviyoPopupImageBound = \"true\";\n\n const popupImagePosition = window.HCX_KLAVIYO_POPUP_IMAGE_POSITION || \"36% center\";\n const signupDiscountCode = \"HERCXLES15\";\n const signupDiscountUrl = `https://hercxles.co.uk/discount/${signupDiscountCode}?redirect=/collections/new-arrivals`;\n const signupOfferPatterns = /Join Legacy|10%\\s*Off|15%\\s*Off|HERCXLES10|LEGACY15/i;\n\n const normaliseSignupOfferText = (value) =>\n value\n .replace(/ADD SMS(?: NOW)? TO UPGRADE YOUR WELCOME OFFER FROM 10% TO 15%\\. EMAIL ONLY\\? CLOSE AND USE HERCXLES10\\./gi,\n `ADD SMS FOR MEMBER UPDATES. EMAIL ONLY? USE ${signupDiscountCode}.`)\n .replace(/YOUR 15% SMS UPGRADE IS ACTIVE/gi, \"YOUR 15% WELCOME OFFER IS ACTIVE\")\n .replace(/NO THANKS\\s*[\\u2014-]\\s*KEEP 10%/gi, \"NO THANKS \\u2014 CONTINUE WITH EMAIL\")\n .replace(/UPGRADE TO 15% OFF|GET 15% OFF INSTEAD/gi, \"UNLOCK 15% OFF\")\n .replace(/UNLOCK 10% OFF/gi, \"UNLOCK 15% OFF\")\n .replace(/10%\\s*OFF/gi, \"15% OFF\")\n .replace(/HERCXLES10|LEGACY15/gi, signupDiscountCode);\n\n const normaliseSignupOffer = () => {\n document.querySelectorAll('[role=\"dialog\"][aria-label=\"POPUP Form\"]').forEach((dialog) => {\n const form = dialog.querySelector(\"form.klaviyo-form\");\n if (!form || !signupOfferPatterns.test(form.innerText || form.textContent || \"\")) return;\n\n const walker = document.createTreeWalker(form, NodeFilter.SHOW_TEXT);\n let textNode = walker.nextNode();\n while (textNode) {\n const nextValue = normaliseSignupOfferText(textNode.nodeValue || \"\");\n if (nextValue !== textNode.nodeValue) textNode.nodeValue = nextValue;\n textNode = walker.nextNode();\n }\n\n form.querySelectorAll(\"[href]\").forEach((link) => {\n const href = link.getAttribute(\"href\") || \"\";\n if (/\\/discount\\/(?:HERCXLES10|LEGACY15)/i.test(href)) link.setAttribute(\"href\", signupDiscountUrl);\n });\n });\n };\n\n const findLeadImage = (form) =>\n Array.from(form.querySelectorAll(\"img\"))\n .filter((image) => {\n const src = image.currentSrc || image.src || image.getAttribute(\"src\") || \"\";\n const alt = image.getAttribute(\"alt\") || \"\";\n\n return !/logo/i.test(alt) && !/flag-icon-css|flags\\/4x3/i.test(src);\n })\n .map((image) => {\n const rect = image.getBoundingClientRect();\n\n return {\n image,\n area: rect.width * rect.height,\n };\n })\n .sort((a, b) => b.area - a.area)[0]?.image || null;\n\n const swapPopupImage = () => {\n normaliseSignupOffer();\n\n document.querySelectorAll('[role=\"dialog\"][aria-label=\"POPUP Form\"]').forEach((dialog) => {\n const form = dialog.querySelector(\"form.klaviyo-form\");\n if (!form) return;\n\n const formText = form.innerText || form.textContent || \"\";\n if (!/Join Legacy/i.test(formText) || !/15%\\s*Off/i.test(formText)) return;\n\n if (!popupImageUrl) return;\n\n const image = findLeadImage(form);\n if (!image) return;\n\n if (image.dataset.hcxPopupImageSrc !== popupImageUrl) {\n image.src = popupImageUrl;\n image.removeAttribute(\"srcset\");\n image.dataset.hcxPopupImageSrc = popupImageUrl;\n }\n\n image.loading = \"eager\";\n image.style.width = \"100%\";\n image.style.height = \"100%\";\n image.style.objectFit = \"cover\";\n image.style.objectPosition = popupImagePosition;\n });\n };\n\n document.addEventListener(\n \"click\",\n (event) => {\n const button = event.target instanceof Element ? event.target.closest(\"button, a\") : null;\n const dialog = button?.closest('[role=\"dialog\"][aria-label=\"POPUP Form\"]');\n if (!button || !dialog) return;\n\n const buttonText = (button.innerText || button.textContent || \"\").replace(/\\s+/g, \" \").trim();\n if (!/^(?:APPLY\\s+(?:LEGACY15|HERCXLES10|HERCXLES15)|NO THANKS\\s*[\\u2014-]\\s*(?:KEEP 10%|CONTINUE WITH EMAIL))$/i.test(buttonText)) return;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n window.location.assign(signupDiscountUrl);\n },\n true\n );\n\n const queueSwap = () => window.requestAnimationFrame(swapPopupImage);\n\n queueSwap();\n\n if (\"MutationObserver\" in window) {\n new MutationObserver(queueSwap).observe(document.body, {\n childList: true,\n subtree: true,\n });\n }\n };\n\n const initLoyaltyPhoneScenes = () => {\n document.querySelectorAll(\"[data-hcx-loyalty-phone-stage]\").forEach((stage) => {\n if (stage.dataset.hcxPhoneBound === \"true\") return;\n\n const program = stage.closest(\"[data-hcx-loyalty-program]\");\n if (program?.classList.contains(\"hcx-legacy-interface\") && window.matchMedia(\"(max-width: 749px)\").matches) {\n stage.dataset.hcxPhoneBound = \"true\";\n stage.dataset.hcxPhoneDisabledMobile = \"true\";\n return;\n }\n\n const canvas = stage.querySelector(\"[data-hcx-loyalty-phone-canvas]\");\n if (!(canvas instanceof HTMLCanvasElement)) return;\n\n stage.dataset.hcxPhoneBound = \"true\";\n\n loadThreeModule()\n .then((THREE) => {\n const pointsText = program?.querySelector(\".hcx-loyalty-profile > strong\")?.textContent.trim() || \"0\";\n const tierText = program?.querySelector(\".hcx-loyalty-profile__topline em\")?.textContent.trim() || \"Athlete\";\n const phonePointsPerPound = Number(program?.dataset.hcxPointsPerPound || 1);\n const customerName = (program?.dataset.hcxCustomerName || \"\").trim() || \"Guest\";\n const isInteractiveLayout = program?.classList.contains(\"hcx-legacy-interface\") || program?.dataset.hcxLoyaltyInterface === \"true\";\n let rewardAlertActive = program?.dataset.hcxRewardAlertActive === \"true\";\n let rewardAlertCount = Math.max(0, Number(program?.dataset.hcxAvailableRewardSteps || 0));\n let orderNotification = program?.hcxLegacyOrderNotification || null;\n let requestPhoneRender = () => {};\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(34, 1, .1, 100);\n const renderer = new THREE.WebGLRenderer({\n alpha: true,\n antialias: true,\n canvas,\n powerPreference: \"high-performance\",\n });\n const phone = new THREE.Group();\n const reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n let animationFrame = null;\n let isVisible = true;\n\n if (\"outputColorSpace\" in renderer && THREE.SRGBColorSpace) renderer.outputColorSpace = THREE.SRGBColorSpace;\n if (\"toneMapping\" in renderer && THREE.ACESFilmicToneMapping) {\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = .9;\n }\n renderer.setClearColor(0x000000, 0);\n camera.position.set(0, 0, 8.3);\n\n scene.add(new THREE.AmbientLight(0xffffff, .54));\n const keyLight = new THREE.DirectionalLight(0xffffff, 2.15);\n keyLight.position.set(2.4, 3.6, 5.4);\n scene.add(keyLight);\n const rimLight = new THREE.PointLight(0xd8d8d8, 1.45, 10);\n rimLight.position.set(-3.2, 1.2, 3.8);\n scene.add(rimLight);\n\n const bodyGeometry = new THREE.ExtrudeGeometry(createRoundedPhoneShape(THREE, 2.52, 5.4, .44), {\n depth: .055,\n bevelEnabled: true,\n bevelSegments: 10,\n bevelSize: .016,\n bevelThickness: .018,\n curveSegments: 32,\n });\n bodyGeometry.center();\n\n const bodyMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x050505,\n clearcoat: .5,\n clearcoatRoughness: .42,\n metalness: .18,\n roughness: .48,\n });\n const body = new THREE.Mesh(bodyGeometry, bodyMaterial);\n phone.add(body);\n const bodyEdges = new THREE.LineSegments(\n new THREE.EdgesGeometry(bodyGeometry, 16),\n new THREE.LineBasicMaterial({\n color: 0xd8d8d8,\n transparent: true,\n opacity: .012,\n })\n );\n phone.add(bodyEdges);\n\n const glassMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x0a0a0a,\n clearcoat: 1,\n clearcoatRoughness: .16,\n metalness: .05,\n roughness: .22,\n transparent: true,\n });\n const screenMaterial = new THREE.MeshBasicMaterial({\n color: 0xffffff,\n map: createLoyaltyPhoneTexture(THREE, pointsText, tierText),\n side: THREE.FrontSide,\n transparent: false,\n opacity: 1,\n depthTest: true,\n depthWrite: true,\n toneMapped: false,\n });\n\n const screenGeometry = normalizePhoneGeometryUv(\n THREE,\n new THREE.ShapeGeometry(createRoundedPhoneShape(THREE, 2.44, 5.26, .42), 40)\n );\n const screen = new THREE.Mesh(screenGeometry, screenMaterial);\n screen.position.z = .052;\n phone.add(screen);\n\n const islandMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x020202,\n clearcoat: .62,\n clearcoatRoughness: .34,\n metalness: 0,\n roughness: .42,\n transparent: false,\n });\n const island = new THREE.Mesh(\n new THREE.ShapeGeometry(createRoundedPhoneShape(THREE, .68, .17, .085), 28),\n islandMaterial\n );\n island.position.set(0, 2.34, .059);\n phone.add(island);\n\n const islandLens = new THREE.Mesh(\n new THREE.CircleGeometry(.027, 24),\n new THREE.MeshBasicMaterial({ color: 0x151515 })\n );\n islandLens.position.set(.2, 2.34, .062);\n phone.add(islandLens);\n\n const backMaterial = glassMaterial.clone();\n backMaterial.map = createLoyaltyPhoneTexture(THREE, pointsText, tierText, true);\n backMaterial.emissiveMap = backMaterial.map;\n backMaterial.emissive = new THREE.Color(0xc2c2c2);\n backMaterial.emissiveIntensity = .23;\n backMaterial.side = THREE.FrontSide;\n backMaterial.transparent = false;\n backMaterial.opacity = 1;\n backMaterial.depthTest = true;\n backMaterial.depthWrite = true;\n const backGeometry = normalizePhoneGeometryUv(\n THREE,\n new THREE.ShapeGeometry(createRoundedPhoneShape(THREE, 2.36, 5.12, .46), 36)\n );\n const back = new THREE.Mesh(backGeometry, backMaterial);\n back.position.z = -.052;\n back.rotation.y = Math.PI;\n phone.add(back);\n\n const lensMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x020202,\n clearcoat: .9,\n metalness: .4,\n roughness: .18,\n });\n [[-.68, 1.78], [-.34, 1.42]].forEach(([x, y]) => {\n const lens = new THREE.Mesh(new THREE.CylinderGeometry(.14, .14, .035, 40), lensMaterial);\n lens.rotation.x = Math.PI / 2;\n lens.position.set(x, y, -.105);\n phone.add(lens);\n });\n\n const buttonMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x151515,\n metalness: .8,\n roughness: .24,\n });\n const sideButton = new THREE.Mesh(new THREE.BoxGeometry(.035, .58, .08), buttonMaterial);\n sideButton.position.set(1.275, 1.28, .005);\n if (!isInteractiveLayout) phone.add(sideButton);\n\n const systemCards = Array.from(program?.querySelectorAll(\".hcx-loyalty-program__system article\") || []);\n const tierCards = Array.from(program?.querySelectorAll(\".hcx-loyalty-tier\") || []);\n const getCardLine = (card, selector, fallback) => card?.querySelector(selector)?.textContent.trim() || fallback;\n const cleanCurrencyLine = (value) =>\n String(value || \"\")\n .replace(/(?:\\u00c3\\u201a)?\\u00c2?\\u00a3/g, \"GBP \")\n .replace(/\\s+/g, \" \")\n .trim();\n const phoneSpendUnitText = `${phonePointsPerPound} ${phonePointsPerPound === 1 ? \"point\" : \"points\"} per GBP 1`;\n const birthdayText = cleanCurrencyLine(getCardLine(systemCards[2], \"h2\", \"300 birthday points\"));\n const reviewRewardText = cleanCurrencyLine(getCardLine(systemCards[3], \"h2\", \"200 review points\"));\n const redeemCards = Array.from(program?.querySelectorAll(\".hcx-loyalty-joy__summary span\") || []);\n const redeemReadyText = cleanCurrencyLine(getCardLine(redeemCards[1], \"strong\", \"200 pts\"));\n const redeemRateText = cleanCurrencyLine(getCardLine(redeemCards[2], \"strong\", \"200 points = GBP 10\"));\n const firstTier = getCardLine(tierCards[0], \"strong\", \"Mortal\");\n const lastTier = getCardLine(tierCards[tierCards.length - 1], \"strong\", \"Zeus\");\n const firstThreshold = cleanCurrencyLine(getCardLine(tierCards[1], \"em\", \"GBP 100 spend\"));\n const finalThreshold = cleanCurrencyLine(getCardLine(tierCards[tierCards.length - 1], \"em\", \"GBP 1500 lifetime spend\"));\n const trackingHub = program?.querySelector(\"[data-hcx-tracking-hub]\");\n const phoneTabLabels = Array.from(program?.querySelectorAll(\".hcx-legacy-phone-hotspot\") || [])\n .map((button) => (button.getAttribute(\"aria-label\") || \"\").replace(/^Show\\s+/i, \"\").trim())\n .filter(Boolean);\n const phonePageLabels = phoneTabLabels.length ? phoneTabLabels : [\n \"Welcome\",\n \"Points\",\n ...(program?.querySelector(\".hcx-loyalty-joy\") ? [\"Redeem\"] : []),\n \"Tiers\",\n ...(trackingHub ? [\"Orders\"] : []),\n ];\n const trackingTotal = trackingHub?.dataset.hcxTrackingTotal || \"0\";\n const trackingActive = trackingHub?.dataset.hcxTrackingActive || \"0\";\n const trackingDelivered = trackingHub?.dataset.hcxTrackingDelivered || \"0\";\n const phoneScreenSpecs = [];\n const findPhonePageIndex = (label, fallbackIndex) => {\n const pageIndex = phonePageLabels.findIndex((page) => page.toLowerCase() === label.toLowerCase());\n return pageIndex >= 0 ? pageIndex : fallbackIndex;\n };\n const hasRedeemPage = phonePageLabels.some((page) => page.toLowerCase() === \"redeem\");\n const getPhoneEyebrow = (label, fallbackIndex) =>\n `${String(findPhonePageIndex(label, fallbackIndex) + 1).padStart(2, \"0\")} / ${label.toUpperCase()}`;\n const cleanPageSummaries = phonePageLabels.map((page) => {\n const normalizedPage = page.toLowerCase();\n if (normalizedPage === \"welcome\") return `${pointsText || \"0\"} pts / ${tierText || \"Mortal\"}`;\n if (normalizedPage === \"points\") return \"Earn and redeem\";\n if (normalizedPage === \"redeem\") return \"Coupons and codes\";\n if (normalizedPage === \"tiers\") return \"Tier progress\";\n if (normalizedPage === \"tracking\" || normalizedPage === \"orders\") return \"Orders and returns\";\n return `${page} panel`;\n });\n const cleanPhoneScreenSpecs = [\n {\n body: \"Balance, tier and quick actions.\",\n eyebrow: getPhoneEyebrow(\"Welcome\", 0),\n footer: \"TAP OR SCROLL\",\n hero: `${pointsText || \"0\"} points`,\n index: findPhonePageIndex(\"Welcome\", 0),\n pageSummaries: cleanPageSummaries,\n pages: phonePageLabels,\n rows: [\n [\"Tier\", tierText || \"Mortal\"],\n [\"Next\", \"Lifetime spend sets tiers\"],\n [\"Birthday\", birthdayText],\n ],\n title: \"Legacy\",\n },\n {\n body: \"Paid orders become points.\",\n eyebrow: getPhoneEyebrow(\"Points\", 1),\n footer: \"EARN THEN REDEEM\",\n hero: phoneSpendUnitText,\n index: findPhonePageIndex(\"Points\", 1),\n pageSummaries: cleanPageSummaries,\n pages: phonePageLabels,\n rows: [\n [\"Earn\", cleanCurrencyLine(getCardLine(systemCards[0], \"h2\", phoneSpendUnitText))],\n [\"Redeem\", cleanCurrencyLine(getCardLine(systemCards[1], \"h2\", \"200 points = GBP 10\"))],\n [\"Bonus\", reviewRewardText],\n ],\n title: \"Points\",\n },\n ...(hasRedeemPage ? [{\n body: \"Open coupons and claim available rewards.\",\n eyebrow: getPhoneEyebrow(\"Redeem\", 2),\n footer: \"COUPONS\",\n hero: \"Redeem points\",\n index: findPhonePageIndex(\"Redeem\", 2),\n pageSummaries: cleanPageSummaries,\n pages: phonePageLabels,\n rows: [\n [\"Balance\", `${pointsText || \"0\"} pts`],\n [\"Ready\", redeemReadyText],\n [\"Rate\", redeemRateText],\n ],\n title: \"Redeem\",\n }] : []),\n {\n body: \"Lifetime spend sets your Legacy tier.\",\n eyebrow: getPhoneEyebrow(\"Tiers\", hasRedeemPage ? 3 : 2),\n footer: \"FOLLOW THE PATH\",\n hero: `${firstTier} to ${lastTier}`,\n index: findPhonePageIndex(\"Tiers\", hasRedeemPage ? 3 : 2),\n pageSummaries: cleanPageSummaries,\n pages: phonePageLabels,\n rows: [\n [\"Start\", \"Join Legacy\"],\n [\"First\", firstThreshold],\n [\"Final\", finalThreshold],\n ],\n title: \"Tiers\",\n },\n ];\n if (trackingHub) {\n cleanPhoneScreenSpecs.push({\n body: \"Track orders and start returns.\",\n eyebrow: getPhoneEyebrow(\"Orders\", hasRedeemPage ? 4 : 3),\n footer: \"ORDER HUB\",\n hero: \"Orders\",\n index: findPhonePageIndex(\"Orders\", hasRedeemPage ? 4 : 3),\n pageSummaries: cleanPageSummaries,\n pages: phonePageLabels,\n rows: [\n [\"Orders\", trackingTotal],\n [\"On way\", trackingActive],\n [\"Delivered\", trackingDelivered],\n [\"Returns\", \"Available\"],\n ],\n title: \"Orders\",\n });\n }\n phoneScreenSpecs.splice(0, phoneScreenSpecs.length, ...cleanPhoneScreenSpecs);\n const legacyPanelSpecs = isInteractiveLayout ? [] : [\n {\n body: \"Balance, tier and birthday reward stay connected.\",\n eyebrow: \"PART 01 / WELCOME\",\n footer: \"LEGACY PROFILE\",\n rows: [\n [\"BALANCE\", `${pointsText || \"0\"} PTS`],\n [\"TIER\", tierText || \"Mortal\"],\n [\"BIRTHDAY\", birthdayText.toUpperCase()],\n ],\n title: \"WELCOME\",\n },\n {\n body: \"Paid orders become points, then points become vouchers.\",\n eyebrow: \"PART 02 / POINTS\",\n footer: \"EARN THEN REDEEM\",\n rows: [\n [\"EARN\", cleanCurrencyLine(getCardLine(systemCards[0], \"h2\", phoneSpendUnitText)).toUpperCase()],\n [\"REDEEM\", cleanCurrencyLine(getCardLine(systemCards[1], \"h2\", \"200 points = GBP 10\")).toUpperCase()],\n [\"BONUS\", reviewRewardText.toUpperCase()],\n ],\n title: \"POINTS\",\n },\n ...(hasRedeemPage ? [{\n body: \"Available points can become checkout coupons.\",\n eyebrow: \"PART 03 / REDEEM\",\n footer: \"COUPONS\",\n rows: [\n [\"BALANCE\", `${pointsText || \"0\"} PTS`],\n [\"READY\", redeemReadyText.toUpperCase()],\n [\"RATE\", redeemRateText.toUpperCase()],\n ],\n title: \"REDEEM\",\n }] : []),\n {\n body: \"The tier map shows the next useful unlock.\",\n eyebrow: hasRedeemPage ? \"PART 04 / TIERS\" : \"PART 03 / TIERS\",\n footer: \"FOLLOW THE PATH\",\n rows: [\n [\"START\", firstTier.toUpperCase()],\n [\"FIRST UNLOCK\", firstThreshold.toUpperCase()],\n [\"FINAL\", `${lastTier.toUpperCase()} / ${finalThreshold.toUpperCase()}`],\n ],\n title: \"TIERS\",\n },\n ...(trackingHub ? [{\n body: \"Orders and returns live together.\",\n eyebrow: hasRedeemPage ? \"PART 05 / ORDERS\" : \"PART 04 / ORDERS\",\n footer: \"ORDER HUB\",\n rows: [\n [\"ORDERS\", trackingTotal],\n [\"ON WAY\", trackingActive],\n [\"DELIVERED\", trackingDelivered],\n ],\n title: \"ORDERS\",\n }] : []),\n ];\n const panelGeometry = new THREE.ShapeGeometry(createRoundedPhoneShape(THREE, 1.94, 2.82, .22), 32);\n const legacyPanels = legacyPanelSpecs.map((panel, index) => {\n const panelGroup = new THREE.Group();\n const panelTexture = createLoyaltyPhonePanelTexture(THREE, panel);\n const panelMaterial = new THREE.MeshPhysicalMaterial({\n color: 0x101010,\n clearcoat: .82,\n clearcoatRoughness: .13,\n emissive: new THREE.Color(0xc2c2c2),\n emissiveIntensity: .42,\n emissiveMap: panelTexture,\n map: panelTexture,\n metalness: .16,\n opacity: 0,\n roughness: .2,\n side: THREE.DoubleSide,\n transparent: true,\n });\n const rewardsPanel = new THREE.Mesh(panelGeometry, panelMaterial);\n rewardsPanel.position.z = .18;\n panelGroup.add(rewardsPanel);\n\n const panelEdgesMaterial = new THREE.LineBasicMaterial({\n color: 0xd8d8d8,\n transparent: true,\n opacity: 0,\n });\n const panelEdges = new THREE.LineSegments(new THREE.EdgesGeometry(panelGeometry, 16), panelEdgesMaterial);\n panelEdges.position.z = .19;\n panelGroup.add(panelEdges);\n panelGroup.userData = {\n edgeMaterial: panelEdgesMaterial,\n index,\n material: panelMaterial,\n };\n scene.add(panelGroup);\n\n return panelGroup;\n });\n let phoneTimeText = getLoyaltyPhoneTimeText();\n const buildPhoneScreenSpec = (screenSpec, extra = {}) => ({\n ...screenSpec,\n accountLabel: customerName,\n orderNotification,\n rewardAlert: rewardAlertActive,\n rewardAlertCount,\n rewardAlertIndex: Math.max(0, phonePageLabels.indexOf(\"Redeem\")),\n ...extra,\n });\n const buildPhoneScreenTextures = () =>\n isInteractiveLayout\n ? phoneScreenSpecs.map((screenSpec) =>\n createLoyaltyPhoneTexture(\n THREE,\n pointsText,\n tierText,\n false,\n buildPhoneScreenSpec(screenSpec),\n phoneTimeText\n )\n )\n : [];\n let phoneScreenTextures = buildPhoneScreenTextures();\n let activePhoneScreenIndex = -1;\n let hoveredPhoneScreenIndex = -1;\n let hoverPhoneScreenTexture = null;\n\n const disposeHoverPhoneScreenTexture = () => {\n hoverPhoneScreenTexture?.dispose?.();\n hoverPhoneScreenTexture = null;\n };\n\n const applyPhoneScreenTexture = () => {\n if (!phoneScreenTextures.length) return;\n\n const currentIndex = activePhoneScreenIndex >= 0 ? activePhoneScreenIndex : 0;\n const hoverIndex = hoveredPhoneScreenIndex >= 0 && hoveredPhoneScreenIndex !== currentIndex\n ? hoveredPhoneScreenIndex\n : -1;\n\n if (hoverIndex >= 0) {\n disposeHoverPhoneScreenTexture();\n hoverPhoneScreenTexture = createLoyaltyPhoneTexture(\n THREE,\n pointsText,\n tierText,\n false,\n buildPhoneScreenSpec(phoneScreenSpecs[currentIndex], { hoverIndex }),\n phoneTimeText\n );\n screenMaterial.map = hoverPhoneScreenTexture;\n } else {\n disposeHoverPhoneScreenTexture();\n screenMaterial.map = phoneScreenTextures[currentIndex];\n }\n\n screenMaterial.needsUpdate = true;\n };\n\n const setPhoneScreen = (index, force = false) => {\n if (!phoneScreenTextures.length) return;\n\n const nextIndex = clampValue(index, 0, phoneScreenTextures.length - 1);\n if (!force && nextIndex === activePhoneScreenIndex) return;\n\n activePhoneScreenIndex = nextIndex;\n applyPhoneScreenTexture();\n stage.dataset.hcxPhoneScreen = phoneScreenSpecs[nextIndex]?.title || phonePageLabels[nextIndex] || \"Legacy\";\n stage.dataset.hcxPhoneTime = phoneTimeText;\n };\n\n const setPhoneHover = (index) => {\n if (!phoneScreenTextures.length) return;\n\n const nextIndex = Number.isFinite(Number(index))\n ? clampValue(Number(index), 0, phoneScreenTextures.length - 1)\n : -1;\n\n if (nextIndex === hoveredPhoneScreenIndex) return;\n\n hoveredPhoneScreenIndex = nextIndex;\n applyPhoneScreenTexture();\n };\n\n const refreshPhoneTime = () => {\n if (!phoneScreenTextures.length) return;\n\n const nextPhoneTimeText = getLoyaltyPhoneTimeText();\n if (nextPhoneTimeText === phoneTimeText) return;\n\n const previousTextures = phoneScreenTextures;\n const currentIndex = activePhoneScreenIndex >= 0 ? activePhoneScreenIndex : 0;\n phoneTimeText = nextPhoneTimeText;\n phoneScreenTextures = buildPhoneScreenTextures();\n activePhoneScreenIndex = -1;\n setPhoneScreen(currentIndex, true);\n previousTextures.forEach((texture) => texture.dispose?.());\n };\n\n const refreshRewardAlert = () => {\n if (!phoneScreenTextures.length || !program) return;\n\n const nextActive = program.dataset.hcxRewardAlertActive === \"true\";\n const nextCount = Math.max(0, Number(program.dataset.hcxAvailableRewardSteps || 0));\n if (nextActive === rewardAlertActive && nextCount === rewardAlertCount) return;\n\n const previousTextures = phoneScreenTextures;\n const currentIndex = activePhoneScreenIndex >= 0 ? activePhoneScreenIndex : 0;\n rewardAlertActive = nextActive;\n rewardAlertCount = nextCount;\n phoneScreenTextures = buildPhoneScreenTextures();\n activePhoneScreenIndex = -1;\n setPhoneScreen(currentIndex, true);\n previousTextures.forEach((texture) => texture.dispose?.());\n };\n\n const refreshOrderNotification = (detail = null) => {\n const nextNotification = detail?.item\n ? {\n item: String(detail.item).slice(0, 80),\n country: String(detail.country || detail.location || \"Online customer\").slice(0, 40),\n timeAgo: String(detail.timeAgo || \"now\").slice(0, 30),\n }\n : null;\n const same =\n (!nextNotification && !orderNotification) ||\n (nextNotification &&\n orderNotification &&\n nextNotification.item === orderNotification.item &&\n nextNotification.country === orderNotification.country &&\n nextNotification.timeAgo === orderNotification.timeAgo);\n\n if (same || !phoneScreenTextures.length) return;\n\n const previousTextures = phoneScreenTextures;\n const currentIndex = activePhoneScreenIndex >= 0 ? activePhoneScreenIndex : 0;\n orderNotification = nextNotification;\n phoneScreenTextures = buildPhoneScreenTextures();\n activePhoneScreenIndex = -1;\n setPhoneScreen(currentIndex, true);\n previousTextures.forEach((texture) => texture.dispose?.());\n requestPhoneRender();\n };\n\n program?.addEventListener(\"hcx:reward-alert-changed\", refreshRewardAlert);\n program?.addEventListener(\"hcx:legacy-order-notification\", (event) => {\n refreshOrderNotification(event.detail);\n });\n if (program?.hcxLegacyOrderNotification) refreshOrderNotification(program.hcxLegacyOrderNotification);\n program?.addEventListener(\"pointerover\", (event) => {\n const trigger = event.target instanceof Element ? event.target.closest(\"[data-hcx-phone-hotspot]\") : null;\n if (!trigger || !program.contains(trigger)) return;\n\n setPhoneHover(trigger.dataset.hcxLoyaltyTab);\n });\n program?.addEventListener(\"pointerout\", (event) => {\n const trigger = event.target instanceof Element ? event.target.closest(\"[data-hcx-phone-hotspot]\") : null;\n if (!trigger || !program.contains(trigger)) return;\n if (event.relatedTarget instanceof Element && trigger.contains(event.relatedTarget)) return;\n\n setPhoneHover(-1);\n });\n\n setPhoneScreen(0, true);\n\n phone.rotation.x = -.055;\n phone.rotation.y = -.075;\n phone.rotation.z = -.028;\n if (isInteractiveLayout) phone.scale.setScalar(.88);\n scene.add(phone);\n\n const resize = () => {\n const rect = stage.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.7));\n renderer.setSize(rect.width, rect.height, false);\n camera.aspect = rect.width / rect.height;\n camera.updateProjectionMatrix();\n };\n\n const getScrollProgress = () => {\n const target = isInteractiveLayout ? program?.querySelector(\"[data-hcx-legacy-stage]\") || program || stage : program || stage;\n const rect = target.getBoundingClientRect();\n const viewport = window.innerHeight || document.documentElement.clientHeight || 1;\n const travel = isInteractiveLayout\n ? Math.max(target.scrollHeight - viewport, viewport * 4)\n : Math.max(rect.height - viewport * .32, viewport * 1.45);\n\n return clampValue(((isInteractiveLayout ? 0 : viewport * .18) - rect.top) / travel, 0, 1);\n };\n\n const updatePhoneState = (time = 0) => {\n const rawProgress = getScrollProgress();\n const progress = smoothStep(rawProgress);\n const drift = reducedMotion ? 0 : Math.sin(time * .00052);\n const breathe = reducedMotion ? 0 : Math.sin(time * .00082);\n const spin = isInteractiveLayout\n ? Math.sin(progress * Math.PI * 1.08) * .032 + progress * .026\n : progress * Math.PI * 2.35;\n const panelCount = Number(program?.dataset.hcxPanelCount || legacyPanels.length || 1);\n const syncedPanel = Number(program?.dataset.hcxLegacyActivePanel || 0) - 1;\n const activePanel = isInteractiveLayout && Number.isFinite(syncedPanel) && syncedPanel >= 0\n ? clampValue(syncedPanel, 0, panelCount - 1)\n : clampValue(Math.floor(rawProgress * panelCount), 0, panelCount - 1);\n\n setPhoneScreen(activePanel);\n phone.position.set(-.39 + Math.sin(progress * Math.PI * 2) * (isInteractiveLayout ? .045 : .1), .02 + breathe * .024, 0);\n phone.rotation.x = (isInteractiveLayout ? -.064 : -.18) + Math.sin(progress * Math.PI * 1.45) * (isInteractiveLayout ? .022 : .19) + breathe * .01;\n phone.rotation.y = (isInteractiveLayout ? -.078 : -.76) + spin + drift * (isInteractiveLayout ? .006 : .034);\n phone.rotation.z = (isInteractiveLayout ? -.03 : -.1) + Math.sin(progress * Math.PI) * (isInteractiveLayout ? .016 : .14);\n\n legacyPanels.forEach((panelGroup, index) => {\n const start = .08 + index * .15;\n const open = smoothStep(clampValue((rawProgress - start) / .16, 0, 1));\n const close = smoothStep(clampValue((rawProgress - start - .38) / .18, 0, 1));\n const heldOpacity = 1 - close * .7;\n const isActive = index === activePanel;\n const focusBoost = isActive ? 1 : .76;\n const targetX = .94 + (index % 2) * .42 + Math.floor(index / 2) * .08;\n const targetY = 1.34 - index * .64;\n const targetZ = .24 + index * .065;\n const slideArc = Math.sin(open * Math.PI) * .18;\n const material = panelGroup.userData.material;\n const edgeMaterial = panelGroup.userData.edgeMaterial;\n\n panelGroup.position.set(\n phone.position.x + .34 + targetX * open,\n -.12 + (targetY + slideArc) * open,\n targetZ * open\n );\n panelGroup.rotation.x = -.06 + open * .05;\n panelGroup.rotation.y = -1.62 + open * (1.48 + index * .035) + progress * .08;\n panelGroup.rotation.z = .08 - open * (.06 + index * .01);\n panelGroup.scale.setScalar(.18 + open * (.72 - index * .025));\n material.opacity = open * heldOpacity * focusBoost * .95;\n edgeMaterial.opacity = open * heldOpacity * (isActive ? .58 : .38);\n });\n\n stage.dataset.hcxPhoneScroll = rawProgress.toFixed(3);\n stage.dataset.hcxPhoneActivePanel = String(activePanel + 1);\n };\n\n const renderOnce = (time = 0) => {\n if (!isVisible) return;\n\n updatePhoneState(time);\n renderer.render(scene, camera);\n };\n\n const animate = (time = 0) => {\n animationFrame = null;\n renderOnce(time);\n if (isVisible && !reducedMotion) animationFrame = window.requestAnimationFrame(animate);\n };\n\n const start = () => {\n if (animationFrame || reducedMotion) return;\n animationFrame = window.requestAnimationFrame(animate);\n };\n\n const stop = () => {\n if (!animationFrame) return;\n window.cancelAnimationFrame(animationFrame);\n animationFrame = null;\n };\n\n const requestRender = () => {\n if (!isVisible || animationFrame) return;\n animationFrame = window.requestAnimationFrame(animate);\n };\n requestPhoneRender = requestRender;\n\n if (isInteractiveLayout) {\n window.setInterval(() => {\n refreshPhoneTime();\n requestRender();\n }, 30000);\n }\n\n const resizeObserver = new ResizeObserver(() => {\n resize();\n requestRender();\n });\n resizeObserver.observe(stage);\n\n if (\"IntersectionObserver\" in window) {\n const observer = new IntersectionObserver((entries) => {\n isVisible = entries[0]?.isIntersecting ?? true;\n if (isVisible) {\n renderOnce();\n start();\n } else {\n stop();\n }\n });\n observer.observe(stage);\n }\n\n window.addEventListener(\"resize\", () => {\n resize();\n requestRender();\n });\n window.addEventListener(\"scroll\", requestRender, { passive: true });\n resize();\n renderOnce();\n start();\n stage.classList.add(\"is-three-ready\");\n })\n .catch(() => {\n stage.classList.add(\"is-three-fallback\");\n });\n });\n };\n\n const initLegacyOrderNotifications = () => {\n document.querySelectorAll(\"[data-hcx-loyalty-program]\").forEach((program) => {\n if (program.dataset.hcxOrderNotificationsBound === \"true\") return;\n if (program.dataset.hcxOrderNotifications === \"false\") return;\n\n const stage = program.querySelector(\"[data-hcx-loyalty-phone-stage]\");\n if (!stage) return;\n\n program.dataset.hcxOrderNotificationsBound = \"true\";\n const liveRegion = program.querySelector(\"[data-hcx-order-notification-live]\");\n const notificationLink = program.querySelector(\"[data-hcx-order-notification-link]\");\n const feedUrl = (program.dataset.hcxOrderNotificationsUrl || \"\").trim();\n const isPreview = (() => {\n try {\n return new URLSearchParams(window.location.search).has(\"codex_legacy_edit\") || window.Shopify?.designMode === true;\n } catch (error) {\n return false;\n }\n })();\n const forcePreviewNotification = (() => {\n try {\n return new URLSearchParams(window.location.search).has(\"codex_show_order_popup\");\n } catch (error) {\n return false;\n }\n })();\n const now = Date.now();\n const previewOrders = [\n { id: \"preview-1\", item: \"HERCXLES Legacy Hoodie\", country: \"United Kingdom\", orderedAt: new Date(now - 6 * 60000).toISOString(), url: \"/products/awakening-oversized-t-shirt-1\" },\n { id: \"preview-2\", item: \"Oversized Training Tee\", country: \"Germany\", orderedAt: new Date(now - 19 * 60000).toISOString(), url: \"/products/awakening-oversized-t-shirt-1\" },\n { id: \"preview-3\", item: \"HERCXLES Shorts\", country: \"France\", orderedAt: new Date(now - 42 * 60000).toISOString(), url: \"/products/awakening-oversized-t-shirt-1\" },\n { id: \"preview-4\", item: \"Legacy Zip Hoodie\", country: \"Netherlands\", orderedAt: new Date(now - 76 * 60000).toISOString(), url: \"/products/awakening-oversized-t-shirt-1\" },\n ];\n let orders = [];\n let queue = [];\n let currentIndex = -1;\n let showing = false;\n let nextTimer = null;\n let clearTimer = null;\n let pollTimer = null;\n let popupObserver = null;\n const capturedPopupFingerprints = [];\n\n const isToday = (date) => {\n const orderDate = new Date(date);\n const today = new Date();\n\n return (\n orderDate.getFullYear() === today.getFullYear() &&\n orderDate.getMonth() === today.getMonth() &&\n orderDate.getDate() === today.getDate()\n );\n };\n\n const formatTimeAgo = (date) => {\n const diff = Math.max(0, Date.now() - new Date(date).getTime());\n const minutes = Math.floor(diff / 60000);\n\n if (minutes < 1) return \"just now\";\n if (minutes < 60) return `${minutes} min ago`;\n\n const hours = Math.floor(minutes / 60);\n return `${hours} hr${hours === 1 ? \"\" : \"s\"} ago`;\n };\n\n const cleanText = (value, fallback = \"\") =>\n String(value || fallback)\n .replace(/\\s+/g, \" \")\n .trim();\n\n const normalizeProductUrl = (value) => {\n const urlText = cleanText(value);\n if (!urlText || urlText === \"#\") return \"\";\n\n try {\n const url = new URL(urlText, window.location.origin);\n if (url.origin !== window.location.origin || !url.pathname.includes(\"/products/\")) return \"\";\n\n return `${url.pathname}${url.search}${url.hash}`;\n } catch (error) {\n return \"\";\n }\n };\n\n const productPathFromTitle = (value) => {\n const handle = cleanText(value)\n .toLowerCase()\n .replace(/&/g, \" and \")\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-+|-+$/g, \"\");\n\n return handle ? `/products/${handle}` : \"\";\n };\n\n const getOrderUrl = (order) => {\n const firstItem = Array.isArray(order.items) ? order.items[0] : Array.isArray(order.line_items) ? order.line_items[0] : null;\n const handle = cleanText(order.handle || order.product_handle || firstItem?.handle || firstItem?.product_handle);\n const directUrl = normalizeProductUrl(\n order.url ||\n order.product_url ||\n order.productUrl ||\n order.product_href ||\n order.href ||\n firstItem?.url ||\n firstItem?.product_url ||\n firstItem?.productUrl ||\n firstItem?.href\n );\n\n return directUrl || (handle ? `/products/${handle}` : \"\");\n };\n\n const getPopupProductUrl = (popup) => {\n const link = popup?.closest?.(\"a[href]\") || popup?.querySelector?.(\"a[href]\");\n\n return normalizeProductUrl(link?.getAttribute(\"href\"));\n };\n\n const normalizePopupText = (value) =>\n cleanText(value)\n .replace(/[\\u2022\\u00b7|]/g, \" \")\n .replace(/\\s*\\bby\\s+CareCart\\b\\.?/gi, \" \")\n .replace(/\\b(?:close|dismiss)\\b/gi, \" \")\n .replace(/\\b(?:verified purchase|verified buyer|verified customer|verified order|order verified|verification)\\b/gi, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n const rememberCapturedPopup = (text) => {\n const fingerprint = normalizePopupText(text).toLowerCase().slice(0, 180);\n if (!fingerprint || capturedPopupFingerprints.includes(fingerprint)) return false;\n\n capturedPopupFingerprints.push(fingerprint);\n if (capturedPopupFingerprints.length > 18) capturedPopupFingerprints.shift();\n\n return true;\n };\n\n const getElementSignature = (element) => {\n const className = typeof element.className === \"string\" ? element.className : \"\";\n\n return `${element.id || \"\"} ${className} ${element.getAttribute(\"role\") || \"\"} ${element.getAttribute(\"aria-live\") || \"\"}`;\n };\n\n const isFloatingPopupElement = (element) => {\n try {\n const style = window.getComputedStyle(element);\n const zIndex = Number.parseInt(style.zIndex, 10);\n\n return [\"fixed\", \"sticky\", \"absolute\"].includes(style.position) && (style.position === \"fixed\" || zIndex > 10);\n } catch (error) {\n return false;\n }\n };\n\n const looksLikeExternalSalesPopup = (element) => {\n if (!(element instanceof HTMLElement) || program.contains(element)) return false;\n\n const text = normalizePopupText(element.textContent);\n if (text.length < 12 || text.length > 320) return false;\n if (!/\\b(?:purchased|bought|ordered|order placed|placed an order|recently|just now|\\d+\\s*(?:sec|second|min|minute|hr|hour|day)s?\\s*ago)\\b/i.test(text)) {\n return false;\n }\n\n const hasPopupSignature = /\\b(?:fordeer|sales?|popup|toast|notification|notify|social.?proof|recent|order|purchase)\\b/i.test(getElementSignature(element));\n\n return hasPopupSignature || isFloatingPopupElement(element);\n };\n\n const parseExternalSalesPopup = (popup, text) => {\n const normalized = normalizePopupText(text);\n const timeMatch = normalized.match(/\\b(?:just now|now|\\d+\\s*(?:sec(?:ond)?s?|s|min(?:ute)?s?|m|hr|hour|hours|h|day|days|d)\\s*(?:ago)?)\\b/i);\n const timeAgo = cleanText(timeMatch?.[0] || \"now\")\n .replace(/\\bseconds?\\b/i, \"sec\")\n .replace(/\\bminutes?\\b/i, \"min\")\n .replace(/\\bhours?\\b/i, \"hr\")\n .replace(/\\bdays?\\b/i, \"day\");\n let working = normalized;\n if (timeMatch) working = working.replace(timeMatch[0], \" \");\n working = working\n .replace(/\\b(?:someone|a customer|customer|shopper)\\b/gi, \" \")\n .replace(/\\b(?:just|recently|verified)\\b/gi, \" \");\n\n const locationMatch =\n working.match(/\\b(?:from|in)\\s+([A-Z][A-Za-z'.-]*(?:\\s+[A-Z][A-Za-z'.-]*){0,3})(?=\\s+(?:purchased|bought|ordered|placed|an?\\s+order)|$)/i) ||\n working.match(/\\b(?:from|in)\\s+([A-Z][A-Za-z'.-]*(?:\\s+[A-Z][A-Za-z'.-]*){0,3})\\b/i);\n const passiveItemMatch = working.match(/^(.+?)\\s+(?:was\\s+)?(?:purchased|bought|ordered)\\b/i);\n const activeItemMatch = working.match(/\\b(?:purchased|bought|ordered|placed an order for)\\s+(.+)$/i);\n let item = cleanText(activeItemMatch?.[1] || passiveItemMatch?.[1] || working);\n\n item = item\n .replace(/\\b(?:from|in)\\s+[A-Z][A-Za-z'.-]*(?:\\s+[A-Z][A-Za-z'.-]*){0,3}\\b/gi, \" \")\n .replace(/\\b(?:purchased|bought|ordered|placed an order for|order placed|new order|verified)\\b/gi, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n return {\n country: cleanText(locationMatch?.[1] || \"Online customer\").slice(0, 40),\n item: (item && item.length >= 3 && item.length <= 120 ? item : \"New HERCXLES order\").slice(0, 80),\n timeAgo: timeAgo.slice(0, 30),\n url: getPopupProductUrl(popup),\n };\n };\n\n const hideExternalSalesPopup = (element) => {\n if (!(element instanceof HTMLElement)) return;\n\n element.setAttribute(\"aria-hidden\", \"true\");\n element.style.setProperty(\"opacity\", \"0\", \"important\");\n element.style.setProperty(\"pointer-events\", \"none\", \"important\");\n element.style.setProperty(\"visibility\", \"hidden\", \"important\");\n element.style.setProperty(\"transform\", \"translate3d(0, -140vh, 0)\", \"important\");\n };\n\n const inspectExternalSalesPopup = (node) => {\n const root = node instanceof HTMLElement ? node : node?.parentElement;\n if (!root || root === document.documentElement || root === document.body) return;\n\n const candidates = [];\n let ancestor = root;\n for (let depth = 0; ancestor && depth < 6; depth += 1) {\n candidates.push(ancestor);\n ancestor = ancestor.parentElement;\n }\n root.querySelectorAll?.(\"[class],[id],[role],[aria-live]\").forEach((element) => candidates.push(element));\n\n const popup = candidates.find(looksLikeExternalSalesPopup);\n if (!popup) return;\n\n const text = normalizePopupText(popup.textContent);\n hideExternalSalesPopup(popup);\n if (!rememberCapturedPopup(text)) return;\n\n showExternalNotification(parseExternalSalesPopup(popup, text));\n };\n\n const startSalesPopupBridge = () => {\n if (!document.body || !(\"MutationObserver\" in window)) return;\n\n const scanExistingPopups = () => {\n document.querySelectorAll(\"[class],[id],[role],[aria-live]\").forEach(inspectExternalSalesPopup);\n };\n\n popupObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === \"characterData\") {\n inspectExternalSalesPopup(mutation.target);\n return;\n }\n\n mutation.addedNodes.forEach(inspectExternalSalesPopup);\n });\n });\n popupObserver.observe(document.body, { childList: true, characterData: true, subtree: true });\n window.setTimeout(scanExistingPopups, 800);\n window.setTimeout(scanExistingPopups, 2500);\n };\n\n const formatCountry = (value) => {\n const country = cleanText(value);\n\n if (!/^[a-z]{2}$/i.test(country) || typeof Intl === \"undefined\" || !Intl.DisplayNames) return country;\n\n try {\n const displayNames = new Intl.DisplayNames([navigator.language || \"en\"], { type: \"region\" });\n return displayNames.of(country.toUpperCase()) || country.toUpperCase();\n } catch (error) {\n return country.toUpperCase();\n }\n };\n\n const getOrderItem = (order) => {\n const firstItem = Array.isArray(order.items) ? order.items[0] : Array.isArray(order.line_items) ? order.line_items[0] : null;\n\n return (\n order.item ||\n order.title ||\n order.product_title ||\n order.product ||\n order.line_item ||\n firstItem?.item ||\n firstItem?.title ||\n firstItem?.product_title ||\n firstItem?.name\n );\n };\n\n const normalizeOrder = (order, index = 0) => {\n const item = cleanText(getOrderItem(order));\n const country = formatCountry(order.country || order.shipping_country || order.billing_country || order.country_code);\n const orderedAt = order.orderedAt || order.ordered_at || order.created_at || order.timestamp || order.date;\n const date = orderedAt ? new Date(orderedAt) : null;\n\n if (!item || !country || !date || Number.isNaN(date.getTime()) || !isToday(date)) return null;\n\n const id = cleanText(order.id || order.order_id || `${item}:${country}:${date.toISOString()}:${index}`);\n return {\n id,\n item: item.slice(0, 80),\n country: country.slice(0, 40),\n orderedAt: date.toISOString(),\n url: getOrderUrl(order),\n };\n };\n\n const setOrders = (nextOrders) => {\n const normalized = nextOrders\n .map(normalizeOrder)\n .filter(Boolean)\n .sort((a, b) => new Date(b.orderedAt) - new Date(a.orderedAt))\n .slice(0, 12);\n\n if (!normalized.length) {\n orders = [];\n queue = [];\n currentIndex = -1;\n return false;\n }\n\n const existingIds = new Set(orders.map((order) => order.id));\n const fresh = normalized.filter((order) => !existingIds.has(order.id));\n orders = normalized;\n if (fresh.length) queue.push(...fresh);\n\n return true;\n };\n\n const readFeed = async () => {\n if (!feedUrl) return false;\n\n try {\n const response = await fetch(feedUrl, {\n cache: \"no-store\",\n credentials: \"same-origin\",\n headers: { Accept: \"application/json\" },\n });\n\n if (!response.ok) return false;\n\n const data = await response.json();\n const nextOrders = Array.isArray(data) ? data : Array.isArray(data.orders) ? data.orders : [];\n return setOrders(nextOrders);\n } catch (error) {\n return false;\n }\n };\n\n const getNextOrder = () => {\n if (queue.length) return queue.shift();\n if (!orders.length) return null;\n\n currentIndex = (currentIndex + 1) % orders.length;\n return orders[currentIndex];\n };\n\n const clearNotification = () => {\n program.hcxLegacyOrderNotification = null;\n program.dispatchEvent(new CustomEvent(\"hcx:legacy-order-notification\", { detail: null }));\n if (liveRegion) liveRegion.textContent = \"\";\n if (notificationLink) {\n notificationLink.hidden = true;\n notificationLink.classList.remove(\"is-active\");\n notificationLink.removeAttribute(\"href\");\n }\n showing = false;\n if (orders.length) scheduleNext();\n };\n\n const publishNotification = (payload) => {\n const productUrl = normalizeProductUrl(payload.url) || productPathFromTitle(payload.item);\n\n showing = true;\n program.hcxLegacyOrderNotification = { ...payload, url: productUrl };\n program.dispatchEvent(new CustomEvent(\"hcx:legacy-order-notification\", { detail: program.hcxLegacyOrderNotification }));\n if (liveRegion) liveRegion.textContent = `Someone bought ${payload.item}, ${payload.timeAgo}.`;\n if (notificationLink && productUrl) {\n notificationLink.href = productUrl;\n notificationLink.hidden = false;\n notificationLink.classList.add(\"is-active\");\n }\n\n window.clearTimeout(clearTimer);\n clearTimer = window.setTimeout(clearNotification, forcePreviewNotification ? 16000 : 6800);\n };\n\n const showExternalNotification = (payload) => {\n if (!payload?.item || document.hidden) return;\n\n publishNotification({\n item: payload.item,\n country: payload.country || \"Online customer\",\n timeAgo: payload.timeAgo || \"now\",\n url: payload.url,\n });\n };\n\n const showOrder = (order) => {\n if (!order || showing || document.hidden) {\n if (orders.length) scheduleNext();\n return;\n }\n\n publishNotification({\n item: order.item,\n country: order.country,\n timeAgo: formatTimeAgo(order.orderedAt),\n url: order.url,\n });\n };\n\n const scheduleNext = () => {\n if (!orders.length) return;\n\n window.clearTimeout(nextTimer);\n const delay = 32000 + Math.round(Math.random() * 18000);\n nextTimer = window.setTimeout(() => showOrder(getNextOrder()), delay);\n };\n\n const start = async () => {\n const hasFeed = await readFeed();\n if (!hasFeed && (isPreview || forcePreviewNotification)) setOrders(previewOrders);\n if (!orders.length) return;\n\n const firstDelay = forcePreviewNotification ? 900 : isPreview ? 3500 : 8000 + Math.round(Math.random() * 5000);\n nextTimer = window.setTimeout(() => showOrder(getNextOrder()), firstDelay);\n pollTimer = window.setInterval(readFeed, 60000);\n };\n\n document.addEventListener(\"visibilitychange\", () => {\n if (!document.hidden && !showing && orders.length) scheduleNext();\n });\n\n window.addEventListener(\"pagehide\", () => {\n window.clearTimeout(nextTimer);\n window.clearTimeout(clearTimer);\n window.clearInterval(pollTimer);\n popupObserver?.disconnect?.();\n });\n\n startSalesPopupBridge();\n start();\n });\n };\n\n const initPolicyPageEnhancements = () => {\n const container = document.querySelector(\".shopify-policy__container\");\n if (!container || container.dataset.hcxPolicyEnhanced === \"true\") return;\n\n const body = container.querySelector(\".shopify-policy__body\");\n const title = container.querySelector(\".shopify-policy__title\");\n const titleText = title?.textContent?.trim() || \"Information\";\n const titleLower = titleText.toLowerCase();\n const isContactPolicy = titleLower.includes(\"contact\") || window.location.pathname.includes(\"/policies/contact-information\");\n const supportValue = \"enquiries@hercxles.co.uk\";\n const cleanPolicyText = (root) => {\n if (!root) return;\n\n const replacements = [\n [/This website is operated by HERCXLES\\./g, \"This website is operated by us.\"],\n [/Throughout the site,\\s*the terms\\s*(?:\"|\\u201c)we(?:\"|\\u201d),?\\s*(?:\"|\\u201c)us(?:\"|\\u201d)\\s*and\\s*(?:\"|\\u201c)our(?:\"|\\u201d)\\s*refer to HERCXLES\\./gi, \"Throughout the site, the terms \\\"we\\\", \\\"us\\\" and \\\"our\\\" refer to us.\"],\n [/HERCXLES offers this website/g, \"We offer this website\"],\n [/contact HERCXLES/g, \"contact us\"],\n [/Contact HERCXLES/g, \"Contact us\"],\n [/email HERCXLES/g, \"email us\"],\n [/Email HERCXLES/g, \"Email us\"],\n [/to HERCXLES/g, \"to us\"],\n [/HERCXLES may contact you/g, \"we may contact you\"],\n [/HERCXLES if/g, \"us if\"],\n [/HERCXLES before/g, \"us before\"]\n ];\n const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n const textNodes = [];\n\n while (walker.nextNode()) textNodes.push(walker.currentNode);\n\n textNodes.forEach((node) => {\n let value = node.nodeValue || \"\";\n replacements.forEach(([pattern, replacement]) => {\n value = value.replace(pattern, replacement);\n });\n node.nodeValue = value;\n });\n };\n\n container.dataset.hcxPolicyEnhanced = \"true\";\n container.classList.add(\"hcx-policy-page\");\n\n if (isContactPolicy) {\n container.classList.add(\"hcx-contact-policy-page\");\n if (body) {\n body.innerHTML = `\nLeave blank for a return. Add replacement details for an exchange.
\nSelect the item and replacement details to see whether money is due back or a payment link is needed.
\nWe could not load the products bought in this order. Please contact ${escapeHtml(supportEmail)} with the order number.
\n Email HERCXLES about this order\n `;\n return;\n }\n\n if (!order.lineItems.length) {\n const orderName = order.name || order.number || \"your order\";\n const subject = `Return/exchange item list help ${orderName}`;\n const body = [\n \"Hi,\",\n \"\",\n \"I found my order, but the returns portal could not load the products from the order.\",\n `Order: ${orderName}`,\n `Contact: ${order.email || order.phone || \"\"}`,\n \"\",\n \"Please help me start a return or exchange for the products in this order.\"\n ].join(\"\\n\");\n const href = `mailto:${supportEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\n\n itemsTarget.innerHTML = `\nWe could not load the products bought in this order. Please email HERCXLES with the order number so the team can check the order items and refund or exchange amount.
\n Email HERCXLES about this order\n `;\n return;\n }\n\n itemsTarget.innerHTML = `\n${escapeHtml(returnWindow.message)}
\n ${returnWindow.status === \"closed\" ? `Contact us` : \"\"}\n `;\n\n return returnWindow;\n };\n\n const getSelectedItems = () => {\n if (!activeOrder?.lineItems?.length) {\n return [];\n }\n\n if (activeOrder.needsManualReview) return [];\n\n return [...portal.querySelectorAll(\"[data-hcx-return-item-checkbox]\")]\n .filter((checkbox) => checkbox.checked)\n .map((checkbox) => activeOrder.lineItems[Number(checkbox.dataset.hcxReturnItemIndex)])\n .filter(Boolean);\n };\n\n const updateConfirmButtonState = () => {\n if (!confirmButton || !activeOrder) return;\n\n const returnWindow = activeOrder.returnWindow || getReturnWindow(activeOrder);\n const requestType = getSelectedRequestType();\n const isAllowed = isRequestTypeAllowed(requestType, returnWindow);\n const hasSelectedItems = Boolean(getSelectedItems().length);\n confirmButton.hidden = !(returnWindow.canReturn || returnWindow.canExchange);\n confirmButton.disabled = !isAllowed || !hasSelectedItems;\n confirmButton.setAttribute(\"aria-disabled\", isAllowed && hasSelectedItems ? \"false\" : \"true\");\n };\n\n const requestReference = (order, action) => {\n const orderId = normalizeOrder(order.name || order.number || \"order\").toUpperCase() || \"ORDER\";\n return `HRCX-${orderId}-${action === \"exchange\" ? \"EXCHANGE\" : \"RETURN\"}`;\n };\n\n const getFieldValue = (field) => String(field?.value || \"\").trim();\n\n const parseMoneyAmount = (value = \"\") => {\n const text = String(value || \"\").replace(/,/g, \"\");\n const match = text.match(/-?\\d+(?:\\.\\d+)?/);\n if (!match) return null;\n\n const amount = Number(match[0]);\n return Number.isFinite(amount) ? amount : null;\n };\n\n const formatMoneyAmount = (amount = 0) => {\n try {\n return new Intl.NumberFormat(\"en-GB\", {\n style: \"currency\",\n currency: \"GBP\"\n }).format(Math.max(0, Number(amount) || 0));\n } catch (_) {\n return `GBP ${Math.max(0, Number(amount) || 0).toFixed(2)}`;\n }\n };\n\n const selectedItemsTotal = (selectedItems = []) => {\n if (!selectedItems.length) {\n return {\n amount: 0,\n known: false,\n quantity: 0,\n label: \"Select products\"\n };\n }\n\n let amount = 0;\n let known = true;\n let quantity = 0;\n\n selectedItems.forEach((item) => {\n const itemAmount = parseMoneyAmount(item.price);\n const itemQuantity = Number.parseInt(String(item.quantity || \"1\"), 10);\n quantity += Number.isFinite(itemQuantity) && itemQuantity > 0 ? itemQuantity : 1;\n\n if (itemAmount === null) {\n known = false;\n return;\n }\n\n amount += itemAmount;\n });\n\n return {\n amount,\n known,\n quantity: Math.max(1, quantity || selectedItems.length || 1),\n label: known ? formatMoneyAmount(amount) : \"To confirm\"\n };\n };\n\n const normalizeLookupPhrase = (value = \"\") =>\n String(value || \"\")\n .toLowerCase()\n .replace(/&/g, \" and \")\n .replace(/[^a-z0-9]+/g, \" \")\n .trim();\n\n const lookupTokens = (value = \"\") =>\n normalizeLookupPhrase(value)\n .split(/\\s+/)\n .filter((token) => token.length > 1);\n\n const getProductCatalog = async () => {\n if (!productCatalogPromise) {\n productCatalogPromise = fetch(\"/products.json?limit=250\", {\n headers: { \"Accept\": \"application/json\" },\n cache: \"no-store\"\n })\n .then((response) => (response.ok ? response.json() : { products: [] }))\n .then((payload) => asArray(payload.products).flatMap((product) => {\n const productTitle = String(product.title || \"\").trim();\n const productHandle = String(product.handle || \"\").trim();\n const productImage = String(product.image?.src || asArray(product.images)[0]?.src || \"\");\n return asArray(product.variants).map((variant) => {\n const variantTitle = String(variant.title || \"\").trim();\n const price = Number(variant.price);\n return {\n title: productTitle,\n handle: productHandle,\n variantTitle: variantTitle === \"Default Title\" ? \"\" : variantTitle,\n price: Number.isFinite(price) ? price : null,\n image: productImage,\n text: normalizeLookupPhrase(`${productTitle} ${productHandle} ${variantTitle} ${variant.option1 || \"\"} ${variant.option2 || \"\"} ${variant.option3 || \"\"}`)\n };\n });\n }))\n .catch(() => []);\n }\n\n return productCatalogPromise;\n };\n\n const findReplacementProduct = async (itemQuery = \"\", sizeQuery = \"\") => {\n const query = normalizeLookupPhrase(itemQuery);\n const queryTokenList = lookupTokens(itemQuery);\n const sizeTokenList = lookupTokens(sizeQuery);\n if (!query || query.length < 3 || !queryTokenList.length) return null;\n\n const catalog = await getProductCatalog();\n let bestMatch = null;\n\n catalog.forEach((entry) => {\n if (entry.price === null) return;\n\n const productText = normalizeLookupPhrase(`${entry.title} ${entry.handle}`);\n const variantText = normalizeLookupPhrase(entry.variantTitle);\n const haystack = entry.text;\n let score = 0;\n\n if (productText === query || entry.handle === query.replace(/\\s+/g, \"-\")) score += 100;\n if (productText.includes(query) || haystack.includes(query)) score += 70;\n if (queryTokenList.every((token) => haystack.includes(token))) score += 48;\n score += queryTokenList.filter((token) => haystack.includes(token)).length * 10;\n\n if (sizeTokenList.length) {\n if (sizeTokenList.every((token) => variantText.includes(token))) score += 24;\n else if (sizeTokenList.some((token) => variantText.includes(token))) score += 12;\n }\n\n if (!bestMatch || score > bestMatch.score) {\n bestMatch = { ...entry, score };\n }\n });\n\n return bestMatch?.score >= 55 ? bestMatch : null;\n };\n\n const returnBalanceSummary = (selectedItems = []) => {\n const selectedTotal = selectedItemsTotal(selectedItems);\n if (!selectedTotal.known) {\n const needsSelection = !selectedItems.length;\n return {\n status: \"unknown\",\n heading: \"Refund estimate\",\n customerLabel: needsSelection ? \"Select products to calculate refund\" : \"Refund estimate unavailable\",\n detail: needsSelection\n ? \"Tick the products being returned and the refund estimate will update from their current prices.\"\n : \"The selected product price is not available online, so HERCXLES will email the refund amount.\",\n merchantAction: \"Confirm the returned item value, then refund the customer after inspection.\",\n selectedValue: selectedTotal.label,\n replacementValue: \"\",\n matchedReplacement: \"\"\n };\n }\n\n return {\n status: \"refund\",\n heading: \"Refund estimate\",\n customerLabel: `${selectedTotal.label} refund expected`,\n detail: \"Final refund is processed after the returned items are inspected.\",\n merchantAction: `Refund ${selectedTotal.label} after the returned items are inspected.`,\n selectedValue: selectedTotal.label,\n replacementValue: \"\",\n matchedReplacement: \"\"\n };\n };\n\n const exchangeBalanceSummary = async (requestDetails, selectedItems = []) => {\n const selectedTotal = selectedItemsTotal(selectedItems);\n const exchangeType = normalizeLookupPhrase(requestDetails.exchange.type);\n const replacementText = requestDetails.exchange.item;\n const shouldMatchCatalog = Boolean(replacementText && (exchangeType.includes(\"swap\") || replacementText.length >= 4));\n\n if (!selectedItems.length) {\n return {\n status: \"unknown\",\n heading: \"Exchange balance\",\n customerLabel: \"Select products to calculate balance\",\n detail: \"Tick the products being exchanged and the price difference will update from their current prices.\",\n merchantAction: \"Confirm the selected returned items, then set up any payment link or refund difference.\",\n selectedValue: selectedTotal.label,\n replacementValue: \"Select replacement\",\n matchedReplacement: \"\"\n };\n }\n\n if (!selectedTotal.known) {\n return {\n status: \"unknown\",\n heading: \"Exchange balance\",\n customerLabel: \"Price difference to confirm\",\n detail: \"We will confirm the replacement price by email before setting up any payment or refund.\",\n merchantAction: \"Confirm the returned item value and replacement item price, then email the customer.\",\n selectedValue: selectedTotal.label,\n replacementValue: \"To confirm\",\n matchedReplacement: \"\"\n };\n }\n\n let replacementMatch = null;\n if (shouldMatchCatalog) {\n replacementMatch = await findReplacementProduct(replacementText, requestDetails.exchange.size);\n }\n\n if (!replacementMatch && (exchangeType.includes(\"different size\") || exchangeType.includes(\"different colour\"))) {\n return {\n status: \"same\",\n heading: \"Exchange balance\",\n customerLabel: \"No price difference expected\",\n detail: `${selectedTotal.label} returned item value. Same product size/colour exchanges are expected to be the same price.`,\n merchantAction: \"No payment or refund is expected unless stock or current pricing has changed.\",\n selectedValue: selectedTotal.label,\n replacementValue: selectedTotal.label,\n matchedReplacement: \"Same product exchange\"\n };\n }\n\n if (!replacementMatch) {\n return {\n status: \"unknown\",\n heading: \"Exchange balance\",\n customerLabel: \"Price difference to confirm\",\n detail: `Returned item value is ${selectedTotal.label}. We will confirm the replacement item price by email.`,\n merchantAction: \"Confirm the replacement item price, then send the customer a payment link or refund the difference.\",\n selectedValue: selectedTotal.label,\n replacementValue: \"To confirm\",\n matchedReplacement: \"\"\n };\n }\n\n const replacementTotal = replacementMatch.price * selectedTotal.quantity;\n const difference = replacementTotal - selectedTotal.amount;\n const amountLabel = formatMoneyAmount(Math.abs(difference));\n const replacementLabel = formatMoneyAmount(replacementTotal);\n const matchedReplacement = [\n replacementMatch.title,\n replacementMatch.variantTitle\n ].filter(Boolean).join(\" - \");\n\n if (difference > 0.009) {\n return {\n status: \"pay\",\n heading: \"Exchange balance\",\n customerLabel: `${amountLabel} to pay`,\n detail: `Returned item value ${selectedTotal.label}. Replacement ${replacementLabel}.`,\n merchantAction: `Send the customer a payment link for ${amountLabel} after confirming stock.`,\n selectedValue: selectedTotal.label,\n replacementValue: replacementLabel,\n matchedReplacement\n };\n }\n\n if (difference < -0.009) {\n return {\n status: \"refund\",\n heading: \"Exchange balance\",\n customerLabel: `${amountLabel} refund expected`,\n detail: `Returned item value ${selectedTotal.label}. Replacement ${replacementLabel}.`,\n merchantAction: `Refund ${amountLabel} after confirming stock and receiving the returned item.`,\n selectedValue: selectedTotal.label,\n replacementValue: replacementLabel,\n matchedReplacement\n };\n }\n\n return {\n status: \"same\",\n heading: \"Exchange balance\",\n customerLabel: \"No price difference expected\",\n detail: `Returned item value ${selectedTotal.label}. Replacement ${replacementLabel}.`,\n merchantAction: \"No payment or refund is expected unless stock or current pricing has changed.\",\n selectedValue: selectedTotal.label,\n replacementValue: replacementLabel,\n matchedReplacement\n };\n };\n\n const balanceSummaryMarkup = (summary) => `\n ${escapeHtml(summary.heading || \"Balance\")}\n ${escapeHtml(summary.customerLabel || \"To confirm\")}\n${escapeHtml(summary.detail || \"\")}
\n `;\n\n const updateExchangeBalancePreview = async () => {\n if (!exchangeBalanceTarget || !activeOrder) return;\n if (getSelectedRequestType() !== \"exchange\") return;\n\n const token = ++balancePreviewToken;\n const requestDetails = getRequestDetails(\"exchange\");\n const selectedItems = getSelectedItems();\n exchangeBalanceTarget.dataset.hcxBalanceStatus = \"loading\";\n exchangeBalanceTarget.innerHTML = `\n Exchange balance\n Checking price difference\nMatching the replacement item against current product prices.
\n `;\n\n const summary = await exchangeBalanceSummary(requestDetails, selectedItems);\n if (token !== balancePreviewToken) return;\n\n exchangeBalanceTarget.dataset.hcxBalanceStatus = summary.status || \"unknown\";\n exchangeBalanceTarget.innerHTML = balanceSummaryMarkup(summary);\n };\n\n const getRequestDetails = (requestType) => {\n const exchangeDetails = {\n type: getFieldValue(exchangeTypeField),\n size: getFieldValue(exchangeSizeField),\n item: getFieldValue(exchangeItemField)\n };\n\n return {\n type: requestType,\n reason: getFieldValue(reasonField),\n details: getFieldValue(detailsField),\n exchange: exchangeDetails,\n hasExchangeRequest: Boolean(exchangeDetails.type || exchangeDetails.size || exchangeDetails.item)\n };\n };\n\n const inferRequestTypeFromDetails = () => getSelectedRequestType();\n\n const formatRequestSummaryRows = (requestDetails, requestType, balanceSummary) => {\n const rows = [\n [\"Reason\", requestDetails.reason || \"Not provided\"],\n [\"Extra details\", requestDetails.details || \"Not provided\"]\n ];\n\n if (requestType === \"exchange\") {\n rows.push(\n [\"Exchange type\", requestDetails.exchange.type || \"Not provided\"],\n [\"Requested size\", requestDetails.exchange.size || \"Not provided\"],\n [\"Replacement item / colour\", requestDetails.exchange.item || \"Not provided\"],\n [\"Exchange balance\", balanceSummary.customerLabel || \"To confirm\"]\n );\n if (balanceSummary.matchedReplacement) {\n rows.push([\"Matched replacement\", balanceSummary.matchedReplacement]);\n }\n } else {\n rows.push([\"Refund estimate\", balanceSummary.customerLabel || \"To confirm\"]);\n }\n\n return rows;\n };\n\n const setReturnRequestActionsEnabled = (statusTarget, enabled) => {\n const requestCard = statusTarget?.closest?.(\".hcx-return-request-card\");\n const sendLink = requestCard?.querySelector?.(\"[data-hcx-send-return-request]\");\n const copyButton = requestCard?.querySelector?.(\"[data-hcx-copy-return-request]\");\n\n if (sendLink) {\n const storedHref = sendLink.dataset.hcxRequestHref || sendLink.getAttribute(\"href\") || \"\";\n if (storedHref) sendLink.dataset.hcxRequestHref = storedHref;\n\n if (enabled) {\n if (sendLink.dataset.hcxRequestHref) sendLink.setAttribute(\"href\", sendLink.dataset.hcxRequestHref);\n sendLink.removeAttribute(\"aria-disabled\");\n sendLink.removeAttribute(\"tabindex\");\n } else {\n sendLink.removeAttribute(\"href\");\n sendLink.setAttribute(\"aria-disabled\", \"true\");\n sendLink.setAttribute(\"tabindex\", \"-1\");\n }\n }\n\n if (copyButton) copyButton.disabled = !enabled;\n };\n\n const notifyMerchantRequest = async (payload, statusTarget) => {\n setReturnRequestActionsEnabled(statusTarget, true);\n\n if (!requestUrl) {\n if (statusTarget) statusTarget.textContent = \"Open the email below to send this request to HERCXLES.\";\n return;\n }\n\n const notificationKey = [\n payload.reference,\n payload.requestType,\n payload.reason,\n payload.details,\n payload.exchange?.type,\n payload.exchange?.size,\n payload.exchange?.item,\n payload.balance?.customerLabel,\n payload.items?.join(\"|\")\n ].join(\"::\");\n\n if (sentRequestNotifications.has(notificationKey)) {\n if (statusTarget) statusTarget.textContent = \"This request has already been prepared. You can still open or copy the email below.\";\n return;\n }\n\n try {\n if (statusTarget) statusTarget.textContent = \"Request ready. Sending a copy to HERCXLES.\";\n const { payload: notificationPayload, response } = await fetchHcxOrderLookup(requestUrl, payload);\n if (response.ok && notificationPayload?.notificationSent) {\n sentRequestNotifications.add(notificationKey);\n if (statusTarget) statusTarget.textContent = \"Request sent to HERCXLES. Keep your proof of postage after posting.\";\n return;\n }\n\n if (response.ok && notificationPayload?.error === \"email_notification_not_configured\") {\n setReturnRequestActionsEnabled(statusTarget, true);\n if (statusTarget) statusTarget.textContent = \"Order verified. Open the email below to send this request to HERCXLES.\";\n return;\n }\n\n if (returnRequestVerificationErrors.has(notificationPayload?.error)) {\n if (statusTarget) statusTarget.textContent =\n notificationPayload.error === \"order_customer_mismatch\"\n ? returnRequestVerificationMessage\n : notificationPayload.error === \"return_window_closed\"\n ? \"This order is outside the 14-day return window. Contact us if you still need help.\"\n : notificationPayload.error === \"exchange_window_closed\"\n ? \"This order is outside the 30-day exchange window. Contact us if you still need help.\"\n : \"Automatic send could not verify the request. Use the email button below or contact us with your order number.\";\n return;\n }\n } catch (_) {\n if (statusTarget) statusTarget.textContent = \"Automatic send is unavailable. Use the email button below and keep your proof of postage.\";\n return;\n }\n\n if (statusTarget) {\n statusTarget.textContent = \"Automatic send is unavailable. Use the email button below and keep your proof of postage.\";\n }\n };\n\n const renderLabel = async (action) => {\n if (!activeOrder || !labelTarget) return;\n\n const selectedItems = getSelectedItems();\n if (!selectedItems.length) {\n setRequestError(\"Select at least one item before creating the return or exchange instructions.\");\n return;\n }\n\n const requestType = action === \"exchange\" ? \"exchange\" : \"return\";\n const actionLabel = requestType === \"exchange\" ? \"Exchange\" : \"Return\";\n const returnWindow = activeOrder.returnWindow || getReturnWindow(activeOrder);\n\n if (requestType === \"return\" && !returnWindow.canReturn) {\n setRequestError(returnWindow.status === \"exchange_only\"\n ? \"This order is past the 14-day return window. You can still request an exchange until 30 days after delivery.\"\n : \"This order is outside the return and exchange window. Please contact us for help.\");\n return;\n }\n\n if (requestType === \"exchange\" && !returnWindow.canExchange) {\n setRequestError(\"This order is outside the exchange window. Please contact us for help.\");\n return;\n }\n\n const requestDetails = getRequestDetails(requestType);\n const balanceSummary = requestType === \"exchange\"\n ? await exchangeBalanceSummary(requestDetails, selectedItems)\n : returnBalanceSummary(selectedItems);\n\n if (requestType === \"exchange\" && !requestDetails.hasExchangeRequest && !requestDetails.details) {\n setRequestError(\"Add the size or replacement item you want before completing this exchange.\");\n return;\n }\n\n if (error) error.hidden = true;\n const instructionTitle = `${actionLabel} instructions`;\n const reference = requestReference(activeOrder, requestType);\n const orderName = activeOrder.name || activeOrder.number || \"Order\";\n const customerAddress = [\n activeOrder.shippingAddress?.name,\n activeOrder.shippingAddress?.line1,\n activeOrder.shippingAddress?.line2,\n [activeOrder.shippingAddress?.city, activeOrder.shippingAddress?.postcode].filter(Boolean).join(\" \"),\n activeOrder.shippingAddress?.country\n ].filter(Boolean);\n const selectedItemLines = selectedItems.map((item) =>\n [\n item.title,\n item.variantTitle,\n item.quantity ? `Qty ${item.quantity}` : \"\"\n ].filter(Boolean).join(\", \")\n );\n const reasonHeading = requestType === \"exchange\" ? \"Exchange request / reason\" : \"Return reason\";\n const requestSummaryRows = formatRequestSummaryRows(requestDetails, requestType, balanceSummary);\n const requestSummaryMarkup = requestSummaryRows\n .map(([label, value]) => `\n${escapeHtml(reference)}
\nOrder: ${escapeHtml(orderName)}
\n ${activeOrder.createdAt ? `Placed: ${escapeHtml(activeOrder.createdAt)}
` : \"\"}\n${escapeHtml(activeOrder.email || \"Matched Shopify customer\")}
`}\nEmail ${escapeHtml(supportEmail)} with the tracking number if you want the team to confirm receipt.
\n${escapeHtml(requestType === \"exchange\" ? balanceSummary.customerLabel : balanceSummary.customerLabel)}. This request also tells HERCXLES what to set up before the item is processed.
\n \n \n${escapeHtml(tracking.detail || \"Your order is being processed.\")}
\n \n ${shipmentRows.length ? `\n${escapeHtml([shipment.status, shipment.number ? `#${shipment.number}` : \"\", shipment.estimatedDeliveryAt ? `ETA ${shipment.estimatedDeliveryAt}` : \"\"].filter(Boolean).join(\" | \"))}
\n ${shipment.url ? `Open tracking` : \"\"}\n