\n ${escapeHtml(item.product_title)}\n ${variant}\n \n \n
\n ${hiranyaEscapeHtml(currentPrice)}
\n \n${hiranyaEscapeHtml(fabric)}
`\n : '';\n\n return `\n \n ${imageMarkup}\n${hiranyaEscapeHtml(hiranyaFormatMoney((Number(product.price) || 0) / 100, '\u20B9'))}
\nYour cart is empty.
\n Continue Shopping\nLoading cart\u2026
';\n cartFooter.innerHTML = '';\n\n try {\n const response = await fetch(`${window.theme?.routes?.cart_url || '/cart'}.js`, {\n headers: { Accept: 'application/json' },\n });\n\n if (!response.ok) {\n throw new Error('Unable to load cart');\n }\n\n const cart = await response.json();\n renderCart(cart);\n } catch (error) {\n cartContent.innerHTML = 'Unable to load the cart right now.
';\n cartFooter.innerHTML = '';\n }\n };\n\n const updateCartLine = async (line, quantity) => {\n cartContent.innerHTML = 'Updating cart\u2026
';\n cartFooter.innerHTML = '';\n\n try {\n const response = await fetch(`${window.theme?.routes?.cart_change_url || '/cart/change'}.js`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n },\n body: JSON.stringify({ line, quantity }),\n });\n\n if (!response.ok) {\n throw new Error('Unable to update cart');\n }\n\n const cart = await response.json();\n renderCart(cart);\n } catch (error) {\n cartContent.innerHTML = 'Unable to update the cart right now.
';\n cartFooter.innerHTML = '';\n }\n };\n\n const renderSearchResults = (resources, query) => {\n const groups = [];\n\n const buildCard = (item, typeLabel, price) => {\n const imageUrl = item.featured_image?.url || item.image || '';\n const searchImageUrl = hiranyaImageUrlWithWidth(imageUrl, 240);\n const imageMarkup = imageUrl\n ? `\n \nNo results found for \"${escapeHtml(query)}\".
`;\n return;\n }\n\n searchResults.innerHTML = `\n ${groups.join('')}\n \n `;\n };\n\n const runPredictiveSearch = async (query) => {\n const requestId = ++searchRequestId;\n searchPanel.classList.add('is-querying');\n searchResults.innerHTML = 'Searching\u2026
';\n\n try {\n const params = new URLSearchParams({\n q: query,\n 'resources[type]': 'product,collection,page',\n 'resources[limit]': '4',\n 'resources[options][unavailable_products]': 'hide',\n 'resources[options][fields]': 'title,product_type,variants.title,vendor',\n });\n const response = await fetch(`${window.theme?.routes?.predictive_search_url || '/search/suggest'}.json?${params.toString()}`, {\n headers: { Accept: 'application/json' },\n });\n\n if (!response.ok) {\n throw new Error('Unable to load search suggestions');\n }\n\n const data = await response.json();\n\n if (requestId !== searchRequestId) {\n return;\n }\n\n renderSearchResults(data.resources?.results || {}, query);\n } catch (error) {\n if (requestId !== searchRequestId) {\n return;\n }\n\n searchResults.innerHTML = 'Unable to load suggestions right now.
';\n }\n };\n\n window.HiranyaUI = Object.assign(window.HiranyaUI || {}, {\n openCart: showCart,\n openSearch,\n openMobileNav,\n closePanels,\n refreshCart: loadCart,\n });\n\n searchToggle?.addEventListener('click', (event) => {\n event.preventDefault();\n openSearch();\n });\n\n searchClose?.addEventListener('click', () => {\n closePanels();\n });\n\n cartToggle?.addEventListener('click', async (event) => {\n event.preventDefault();\n await openCart();\n });\n\n mobileNavToggles.forEach((toggle) => {\n toggle.addEventListener('click', (event) => {\n event.preventDefault();\n openMobileNav();\n });\n });\n\n mobileSearchToggle?.addEventListener('click', (event) => {\n event.preventDefault();\n openSearch();\n });\n\n mobileCartToggle?.addEventListener('click', async (event) => {\n event.preventDefault();\n await openCart();\n });\n\n cartClose?.addEventListener('click', () => {\n closePanels();\n });\n\n backdrop.addEventListener('click', () => {\n closePanels();\n });\n\n document.addEventListener('keydown', (event) => {\n if (event.key === 'Escape') {\n closePanels();\n }\n });\n\n mobileNav?.addEventListener('click', (event) => {\n if (event.target.closest('a')) {\n closePanels();\n }\n });\n\n searchForm?.addEventListener('submit', () => {\n closePanels();\n });\n\n searchInput?.addEventListener('input', () => {\n const query = searchInput.value.trim();\n window.clearTimeout(searchTimer);\n\n if (query.length < 2) {\n searchRequestId += 1;\n searchPanel.classList.remove('is-querying');\n searchResults.innerHTML = 'Start typing to see products, collections, and pages.
';\n return;\n }\n\n searchTimer = window.setTimeout(() => {\n runPredictiveSearch(query);\n }, 180);\n });\n\n miniCart.addEventListener('click', (event) => {\n const removeButton = event.target.closest('[data-hiranya-cart-remove]');\n\n if (!removeButton) {\n return;\n }\n\n event.preventDefault();\n updateCartLine(Number(removeButton.dataset.line), 0);\n });\n}\n\nfunction initHiranyaProductForms() {\n document.querySelectorAll('[data-hiranya-product-root]').forEach((root) => {\n const form = root.querySelector('[data-hiranya-product-form]');\n const variantInput = root.querySelector('[data-hiranya-variant-id]');\n const priceNodes = Array.from(root.querySelectorAll('[data-hiranya-price]'));\n const compareNodes = Array.from(root.querySelectorAll('[data-hiranya-compare-price]'));\n const savingsNodes = Array.from(root.querySelectorAll('[data-hiranya-savings]'));\n const skuNodes = Array.from(root.querySelectorAll('[data-hiranya-sku]'));\n const skuRow = root.querySelector('[data-hiranya-sku-row]');\n const addToCartLabel = root.querySelector('[data-hiranya-submit-label]');\n const addToCartButton = root.querySelector('[data-hiranya-submit]');\n const buyNowButton = root.querySelector('[data-hiranya-buy-now]');\n const mobileBar = root.querySelector('[data-hiranya-mobile-cartbar]');\n const mobileBarButton = root.querySelector('[data-hiranya-mobile-submit]');\n const lineSkuInput = root.querySelector('[data-hiranya-line-sku]');\n const variantsScript = root.querySelector('[data-hiranya-variants]');\n\n if (!form || !variantInput || !variantsScript) {\n return;\n }\n\n initHiranyaProductMedia(root);\n initHiranyaSizeGuide(root);\n initHiranyaRecentlyViewed(root);\n initHiranyaPairWith(root);\n\n const variants = JSON.parse(variantsScript.textContent);\n const optionWrappers = Array.from(root.querySelectorAll('[data-hiranya-option-group]'));\n const sizeDrawer = root.querySelector('[data-hiranya-size-drawer]');\n const drawerOptionButtons = Array.from(root.querySelectorAll('[data-hiranya-drawer-option-button]'));\n const drawerSubmitButton = root.querySelector('[data-hiranya-size-drawer-submit]');\n const sizeDrawerCloseButtons = Array.from(root.querySelectorAll('[data-hiranya-size-drawer-close]'));\n const drawerPriceNode = root.querySelector('[data-hiranya-size-drawer-price]');\n const defaultDrawerPrice = drawerPriceNode?.textContent || '';\n const isMobilePdp = () => window.matchMedia('(max-width: 1023px)').matches;\n const requiresExplicitMobileSelection = optionWrappers.length > 0 && variants.length > 1;\n const state = optionWrappers.map((wrapper) => {\n const activeButton =\n wrapper.querySelector('[data-option-button].is-active') ||\n wrapper.querySelector('[data-option-button]');\n return activeButton ? activeButton.dataset.optionValue : '';\n });\n let selectedVariant = null;\n\n if (requiresExplicitMobileSelection && isMobilePdp()) {\n state.fill('');\n }\n\n const syncOptionButtons = () => {\n optionWrappers.forEach((group, index) => {\n const selectedValue = state[index] || '';\n group.querySelectorAll('[data-option-button]').forEach((button) => {\n const isActive = Boolean(selectedValue) && button.dataset.optionValue === selectedValue;\n button.classList.toggle('is-active', isActive);\n button.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n });\n });\n };\n\n const setActiveButton = (position, value) => {\n state[position - 1] = value;\n syncOptionButtons();\n };\n\n const isDrawerOptionAvailable = (position, value) => {\n return variants.some((variant) => {\n if (!variant.available) {\n return false;\n }\n\n return variant.options.every((optionValue, index) => {\n if (index === position - 1) {\n return optionValue === value;\n }\n\n return !state[index] || state[index] === optionValue;\n });\n });\n };\n\n const updateDrawerPrice = (variant) => {\n if (!drawerPriceNode) {\n return;\n }\n\n drawerPriceNode.textContent = variant?.price || defaultDrawerPrice;\n };\n\n const syncDrawerButtons = () => {\n drawerOptionButtons.forEach((button) => {\n const position = Number(button.dataset.optionPosition);\n const value = button.dataset.optionValue;\n const selectedValue = state[position - 1] || '';\n const isActive = Boolean(selectedValue) && value === selectedValue;\n const isAvailable = isDrawerOptionAvailable(position, value);\n\n button.classList.toggle('is-active', isActive);\n button.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n button.toggleAttribute('disabled', !isAvailable);\n button.setAttribute('aria-disabled', isAvailable ? 'false' : 'true');\n });\n };\n\n const syncDrawerSubmit = (variant) => {\n if (!drawerSubmitButton) {\n return;\n }\n\n const canSubmit = Boolean(variant?.available);\n drawerSubmitButton.disabled = !canSubmit;\n drawerSubmitButton.setAttribute('aria-disabled', canSubmit ? 'false' : 'true');\n drawerSubmitButton.textContent = 'Add to Cart';\n };\n\n const setSubmittingState = (isSubmitting, actionLabel) => {\n addToCartButton?.toggleAttribute('disabled', isSubmitting);\n buyNowButton?.toggleAttribute('disabled', isSubmitting);\n mobileBarButton?.toggleAttribute('disabled', isSubmitting);\n if (drawerSubmitButton && isSubmitting) {\n drawerSubmitButton.disabled = true;\n drawerSubmitButton.setAttribute('aria-disabled', 'true');\n drawerSubmitButton.textContent = actionLabel;\n }\n\n if (addToCartLabel && isSubmitting) {\n addToCartLabel.textContent = actionLabel;\n }\n if (mobileBarButton && isSubmitting) {\n mobileBarButton.textContent = actionLabel;\n }\n };\n\n const openSizeDrawer = () => {\n if (!sizeDrawer) {\n return false;\n }\n\n sizeDrawer.hidden = false;\n sizeDrawer.setAttribute('aria-hidden', 'false');\n document.body.classList.add('hiranya-size-drawer-open');\n window.requestAnimationFrame(() => {\n sizeDrawer.classList.add('is-open');\n });\n return true;\n };\n\n const closeSizeDrawer = () => {\n if (!sizeDrawer) {\n return;\n }\n\n sizeDrawer.classList.remove('is-open');\n sizeDrawer.setAttribute('aria-hidden', 'true');\n document.body.classList.remove('hiranya-size-drawer-open');\n window.setTimeout(() => {\n if (sizeDrawer.getAttribute('aria-hidden') === 'true') {\n sizeDrawer.hidden = true;\n }\n }, 220);\n };\n\n const updateVariant = () => {\n const hasIncompleteSelection = state.some((value) => !value);\n\n if (hasIncompleteSelection) {\n selectedVariant = null;\n syncOptionButtons();\n syncDrawerButtons();\n syncDrawerSubmit(null);\n updateDrawerPrice(null);\n form.classList.remove('is-unavailable');\n root.classList.remove('is-unavailable', 'is-variant-selected');\n root.classList.add('is-size-unselected');\n variantInput.value = '';\n if (lineSkuInput) {\n lineSkuInput.value = '';\n }\n if (skuRow) {\n skuRow.hidden = true;\n }\n skuNodes.forEach((node) => {\n node.textContent = '';\n });\n addToCartButton?.toggleAttribute('disabled', false);\n buyNowButton?.toggleAttribute('disabled', false);\n mobileBarButton?.toggleAttribute('disabled', false);\n if (addToCartLabel && isMobilePdp()) {\n addToCartLabel.textContent = 'Add to Cart';\n }\n if (mobileBarButton && isMobilePdp()) {\n mobileBarButton.textContent = 'Add to Cart';\n }\n return null;\n }\n\n const variant = variants.find((candidate) => {\n return candidate.options.every((value, index) => value === state[index]);\n });\n\n if (!variant) {\n selectedVariant = null;\n syncDrawerButtons();\n syncDrawerSubmit(null);\n updateDrawerPrice(null);\n form.classList.add('is-unavailable');\n root.classList.add('is-unavailable');\n root.classList.remove('is-variant-selected', 'is-size-unselected');\n if (skuRow) {\n skuRow.hidden = true;\n }\n skuNodes.forEach((node) => {\n node.textContent = '';\n });\n if (lineSkuInput) {\n lineSkuInput.value = '';\n }\n addToCartButton?.toggleAttribute('disabled', true);\n buyNowButton?.toggleAttribute('disabled', true);\n mobileBarButton?.toggleAttribute('disabled', true);\n if (addToCartLabel) {\n addToCartLabel.textContent = 'Unavailable';\n }\n if (mobileBarButton) {\n mobileBarButton.textContent = 'Unavailable';\n }\n return null;\n }\n\n selectedVariant = variant;\n syncOptionButtons();\n syncDrawerButtons();\n syncDrawerSubmit(variant);\n updateDrawerPrice(variant);\n form.classList.remove('is-unavailable');\n root.classList.remove('is-unavailable');\n root.classList.remove('is-size-unselected');\n root.classList.add('is-variant-selected');\n variantInput.value = variant.id;\n if (lineSkuInput) {\n lineSkuInput.value = variant.sku || '';\n }\n addToCartButton?.toggleAttribute('disabled', !variant.available);\n buyNowButton?.toggleAttribute('disabled', !variant.available);\n mobileBarButton?.toggleAttribute('disabled', !variant.available);\n\n priceNodes.forEach((node) => {\n node.textContent = variant.price;\n });\n\n compareNodes.forEach((node) => {\n node.textContent = variant.compare_at_price || '';\n node.classList.toggle('hidden', !variant.compare_at_price);\n });\n\n savingsNodes.forEach((node) => {\n node.textContent = variant.savings || '';\n node.classList.toggle('hidden', !variant.savings);\n });\n\n const hasSku = Boolean(String(variant.sku || '').trim());\n if (skuRow) {\n skuRow.hidden = !hasSku;\n }\n skuNodes.forEach((node) => {\n node.textContent = variant.sku || '';\n });\n\n const buttonText = variant.available ? 'Add to Cart' : 'Sold Out';\n if (addToCartLabel) {\n addToCartLabel.textContent = buttonText;\n }\n if (mobileBarButton) {\n mobileBarButton.textContent = buttonText + ' - ' + variant.price;\n }\n return variant;\n };\n\n const submitAddToCart = async (formData, action) => {\n const pendingText = action === 'checkout' ? 'Processing\u2026' : 'Adding\u2026';\n setSubmittingState(true, pendingText);\n\n try {\n const response = await fetch(`${window.theme?.routes?.cart_add_url || '/cart/add'}.js`, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error('Unable to add this product right now.');\n }\n\n if (action === 'checkout') {\n window.location.href = '/checkout';\n return;\n }\n\n if (window.HiranyaUI?.openCart) {\n await window.HiranyaUI.openCart();\n }\n } catch (error) {\n window.alert(error.message || 'Unable to add this product right now.');\n } finally {\n setSubmittingState(false, 'Add to Cart');\n updateVariant();\n }\n };\n\n root.querySelectorAll('[data-option-button]').forEach((button) => {\n button.addEventListener('click', () => {\n const position = Number(button.dataset.optionPosition);\n setActiveButton(position, button.dataset.optionValue);\n updateVariant();\n });\n });\n\n drawerOptionButtons.forEach((button) => {\n button.addEventListener('click', () => {\n if (button.disabled) {\n return;\n }\n\n const position = Number(button.dataset.optionPosition);\n setActiveButton(position, button.dataset.optionValue);\n updateVariant();\n });\n });\n\n drawerSubmitButton?.addEventListener('click', () => {\n if (!selectedVariant || !selectedVariant.available) {\n openSizeDrawer();\n return;\n }\n\n closeSizeDrawer();\n if (addToCartButton) {\n form.requestSubmit(addToCartButton);\n }\n });\n\n sizeDrawerCloseButtons.forEach((button) => {\n button.addEventListener('click', (event) => {\n event.preventDefault();\n closeSizeDrawer();\n });\n });\n\n document.addEventListener('keydown', (event) => {\n if (!sizeDrawer || sizeDrawer.hidden || event.key !== 'Escape') {\n return;\n }\n\n closeSizeDrawer();\n });\n\n if (mobileBar && mobileBarButton) {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n const shouldShow = !entry.isIntersecting;\n mobileBar.classList.toggle('is-visible', shouldShow);\n mobileBar.setAttribute('aria-hidden', shouldShow ? 'false' : 'true');\n });\n },\n { rootMargin: '-120px 0px 0px 0px' }\n );\n\n const buttonBlock = root.querySelector('[data-hiranya-buttons]');\n if (buttonBlock) {\n observer.observe(buttonBlock);\n }\n\n mobileBarButton.addEventListener('click', () => {\n if (requiresExplicitMobileSelection && isMobilePdp() && !selectedVariant) {\n openSizeDrawer();\n return;\n }\n\n if (addToCartButton) {\n form.requestSubmit(addToCartButton);\n }\n });\n }\n\n form.addEventListener('submit', async (event) => {\n const action = event.submitter?.dataset.hiranyaAction || 'add';\n\n if (requiresExplicitMobileSelection && isMobilePdp() && !selectedVariant) {\n event.preventDefault();\n openSizeDrawer();\n return;\n }\n\n if (root.classList.contains('is-unavailable')) {\n event.preventDefault();\n return;\n }\n\n event.preventDefault();\n await submitAddToCart(new FormData(form), action);\n });\n\n updateVariant();\n });\n}\n\nfunction initHiranyaPairWith(root) {\n const pairRoot = root.querySelector('[data-hiranya-pair-root]');\n const pairGrid = root.querySelector('[data-hiranya-pair-grid]');\n\n if (!pairRoot || !pairGrid) {\n return;\n }\n\n const bindPairForm = (pairForm) => {\n if (!pairForm || pairForm.dataset.hiranyaBound === 'true') {\n return;\n }\n\n pairForm.dataset.hiranyaBound = 'true';\n\n const select = pairForm.querySelector('[data-hiranya-pair-select]');\n const priceNode = pairForm.closest('.hiranya-pdp__pair-copy')?.querySelector('[data-hiranya-pair-price]');\n const submitButton = pairForm.querySelector('button[type=\"submit\"]');\n const syncSelectedVariant = () => {\n const selectedOption = select?.options?.[select.selectedIndex];\n const isAvailable = selectedOption ? selectedOption.dataset.available !== 'false' : true;\n\n if (priceNode && selectedOption?.dataset.price) {\n priceNode.textContent = selectedOption.dataset.price;\n }\n\n if (submitButton) {\n submitButton.disabled = !isAvailable;\n submitButton.textContent = isAvailable ? 'Add' : 'Sold Out';\n }\n };\n\n select?.addEventListener('change', syncSelectedVariant);\n syncSelectedVariant();\n\n pairForm.addEventListener('submit', async (event) => {\n event.preventDefault();\n\n if (submitButton?.disabled) {\n return;\n }\n\n const originalLabel = submitButton?.textContent || 'Add';\n\n try {\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.textContent = 'Adding\u2026';\n }\n\n const response = await fetch(`${window.theme?.routes?.cart_add_url || '/cart/add'}.js`, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n body: new FormData(pairForm),\n });\n\n if (!response.ok) {\n throw new Error('Unable to add this item right now.');\n }\n\n if (window.HiranyaUI?.openCart) {\n await window.HiranyaUI.openCart();\n }\n } catch (error) {\n window.alert(error.message || 'Unable to add this item right now.');\n } finally {\n if (submitButton) {\n submitButton.textContent = originalLabel;\n }\n syncSelectedVariant();\n }\n });\n };\n\n Array.from(pairGrid.querySelectorAll('[data-hiranya-pair-form]')).forEach(bindPairForm);\n\n const pairSkusScript = root.querySelector('[data-hiranya-pair-skus]');\n if (!pairSkusScript) {\n if (!pairGrid.children.length) {\n pairRoot.hidden = true;\n }\n return;\n }\n\n let pairSkuValues = null;\n try {\n pairSkuValues = JSON.parse(pairSkusScript.textContent || 'null');\n } catch (error) {\n pairSkuValues = pairSkusScript.textContent || '';\n }\n\n const normalizedSkus = (Array.isArray(pairSkuValues) ? pairSkuValues : [pairSkuValues])\n .flatMap((value) => String(value || '').split(/[\\n,]+/))\n .map((value) => hiranyaNormalizeSkuKey(value))\n .filter(Boolean);\n const uniqueSkus = Array.from(new Set(normalizedSkus));\n\n if (!uniqueSkus.length) {\n if (!pairGrid.children.length) {\n pairRoot.hidden = true;\n }\n return;\n }\n\n hiranyaLoadSkuMap(root.dataset.hiranyaSkuMapUrl)\n .then((skuMap) => {\n const matchedPairs = uniqueSkus\n .map((sku) => skuMap?.[sku])\n .filter((item) => item && Array.isArray(item.variants) && item.variants.length);\n\n if (!matchedPairs.length) {\n pairGrid.innerHTML = '';\n pairRoot.hidden = true;\n return;\n }\n\n pairGrid.innerHTML = matchedPairs.map((item) => hiranyaBuildPairCardMarkup(item)).join('');\n Array.from(pairGrid.querySelectorAll('[data-hiranya-pair-form]')).forEach(bindPairForm);\n pairRoot.hidden = false;\n })\n .catch(() => {\n if (!pairGrid.children.length) {\n pairRoot.hidden = true;\n }\n });\n}\n\nfunction initHiranyaProductMedia(root) {\n const triggers = Array.from(root.querySelectorAll('[data-hiranya-media-trigger]'));\n const lightbox = root.querySelector('[data-hiranya-lightbox]');\n\n if (!triggers.length || !lightbox) {\n return;\n }\n\n const image = lightbox.querySelector('[data-hiranya-lightbox-image]');\n const stage = lightbox.querySelector('[data-hiranya-lightbox-stage]');\n const count = lightbox.querySelector('[data-hiranya-lightbox-count]');\n const prevButton = lightbox.querySelector('[data-hiranya-lightbox-prev]');\n const nextButton = lightbox.querySelector('[data-hiranya-lightbox-next]');\n const closeButtons = Array.from(lightbox.querySelectorAll('[data-hiranya-lightbox-close]'));\n const items = triggers.map((trigger, index) => ({\n index,\n src: trigger.dataset.fullSrc || '',\n alt: trigger.dataset.alt || '',\n }));\n\n let currentIndex = 0;\n let isZoomed = false;\n let isPanning = false;\n let didPan = false;\n let suppressClick = false;\n let panX = 0;\n let panY = 0;\n let panStartX = 0;\n let panStartY = 0;\n let pointerStartX = 0;\n let pointerStartY = 0;\n\n const applyPan = () => {\n stage.style.setProperty('--zoom-pan-x', `${panX}px`);\n stage.style.setProperty('--zoom-pan-y', `${panY}px`);\n };\n\n const clampPan = (x, y) => {\n const maxX = Math.max(0, stage.clientWidth * 0.55);\n const maxY = Math.max(0, stage.clientHeight * 0.55);\n\n return {\n x: Math.max(-maxX, Math.min(maxX, x)),\n y: Math.max(-maxY, Math.min(maxY, y)),\n };\n };\n\n const resetZoom = () => {\n isZoomed = false;\n isPanning = false;\n didPan = false;\n suppressClick = false;\n panX = 0;\n panY = 0;\n stage.classList.remove('is-zoomed');\n stage.classList.remove('is-panning');\n stage.style.setProperty('--zoom-origin-x', '50%');\n stage.style.setProperty('--zoom-origin-y', '50%');\n applyPan();\n };\n\n const updateImage = () => {\n const item = items[currentIndex];\n\n if (!item) {\n return;\n }\n\n image.src = item.src;\n image.alt = item.alt;\n count.textContent = `${currentIndex + 1} / ${items.length}`;\n prevButton.disabled = items.length < 2;\n nextButton.disabled = items.length < 2;\n resetZoom();\n };\n\n const open = (index) => {\n currentIndex = index;\n updateImage();\n lightbox.hidden = false;\n lightbox.setAttribute('aria-hidden', 'false');\n document.body.classList.add('hiranya-lightbox-open');\n window.requestAnimationFrame(() => {\n lightbox.classList.add('is-open');\n });\n };\n\n const close = () => {\n lightbox.classList.remove('is-open');\n lightbox.setAttribute('aria-hidden', 'true');\n document.body.classList.remove('hiranya-lightbox-open');\n resetZoom();\n\n window.setTimeout(() => {\n if (lightbox.getAttribute('aria-hidden') === 'true') {\n lightbox.hidden = true;\n }\n }, 220);\n };\n\n const move = (direction) => {\n currentIndex = (currentIndex + direction + items.length) % items.length;\n updateImage();\n };\n\n triggers.forEach((trigger) => {\n trigger.addEventListener('click', () => {\n open(Number(trigger.dataset.index || 0));\n });\n });\n\n closeButtons.forEach((button) => {\n button.addEventListener('click', close);\n });\n\n prevButton?.addEventListener('click', (event) => {\n event.stopPropagation();\n move(-1);\n });\n\n nextButton?.addEventListener('click', (event) => {\n event.stopPropagation();\n move(1);\n });\n\n stage?.addEventListener('click', () => {\n if (suppressClick) {\n suppressClick = false;\n return;\n }\n\n isZoomed = !isZoomed;\n stage.classList.toggle('is-zoomed', isZoomed);\n if (!isZoomed) {\n panX = 0;\n panY = 0;\n applyPan();\n }\n });\n\n stage?.addEventListener('mousemove', (event) => {\n if (!isZoomed || isPanning) {\n return;\n }\n\n const rect = stage.getBoundingClientRect();\n const originX = ((event.clientX - rect.left) / rect.width) * 100;\n const originY = ((event.clientY - rect.top) / rect.height) * 100;\n stage.style.setProperty('--zoom-origin-x', `${originX}%`);\n stage.style.setProperty('--zoom-origin-y', `${originY}%`);\n });\n\n stage?.addEventListener('pointerdown', (event) => {\n if (!isZoomed || event.button > 0) {\n return;\n }\n\n isPanning = true;\n didPan = false;\n pointerStartX = event.clientX;\n pointerStartY = event.clientY;\n panStartX = panX;\n panStartY = panY;\n stage.classList.add('is-panning');\n stage.setPointerCapture?.(event.pointerId);\n event.preventDefault();\n });\n\n stage?.addEventListener('pointermove', (event) => {\n if (!isPanning) {\n return;\n }\n\n const deltaX = event.clientX - pointerStartX;\n const deltaY = event.clientY - pointerStartY;\n\n if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {\n didPan = true;\n }\n\n const clamped = clampPan(panStartX + deltaX, panStartY + deltaY);\n panX = clamped.x;\n panY = clamped.y;\n applyPan();\n event.preventDefault();\n });\n\n const stopPanning = (event) => {\n if (!isPanning) {\n return;\n }\n\n isPanning = false;\n stage.classList.remove('is-panning');\n try {\n stage.releasePointerCapture?.(event.pointerId);\n } catch (error) {\n // Ignore stale pointer captures after touch gestures are interrupted.\n }\n\n if (didPan) {\n suppressClick = true;\n window.setTimeout(() => {\n suppressClick = false;\n }, 0);\n }\n };\n\n stage?.addEventListener('pointerup', stopPanning);\n stage?.addEventListener('pointercancel', stopPanning);\n stage?.addEventListener('pointerleave', stopPanning);\n\n document.addEventListener('keydown', (event) => {\n if (lightbox.hidden) {\n return;\n }\n\n if (event.key === 'Escape') {\n close();\n }\n if (event.key === 'ArrowLeft') {\n move(-1);\n }\n if (event.key === 'ArrowRight') {\n move(1);\n }\n });\n}\n\nfunction initHiranyaSizeGuide(root) {\n const triggers = Array.from(root.querySelectorAll('[data-hiranya-size-guide-trigger], .hiranya-pdp__size-guide'));\n const customTemplate = root.querySelector('[data-hiranya-size-chart-template]');\n const customModal = root.querySelector('[data-hiranya-size-chart-modal]');\n const customContent = root.querySelector('[data-hiranya-size-chart-content]');\n\n if (!triggers.length) {\n return;\n }\n\n const hasCustomChart =\n Boolean(customTemplate) &&\n Boolean(customModal) &&\n Boolean(customContent) &&\n Boolean(customTemplate.innerHTML.trim());\n\n const toCentimeters = (value) => {\n const numericValue = Number(value);\n\n if (!Number.isFinite(numericValue)) {\n return value;\n }\n\n const convertedValue = Math.round(numericValue * 2.54 * 10) / 10;\n return Number.isInteger(convertedValue) ? String(convertedValue) : convertedValue.toFixed(1);\n };\n\n const renderBodyMeasurementTable = (columns, rows, unit, conversionStartIndex) => {\n const headerCells = columns\n .map((column, index) => {\n const alignment = index === 0 ? ' style=\"text-align: center; width: auto;\"' : '';\n return `Our comfort fit garments have 8-10 inches ease from the body measurements.
\nOur comfort fit garments have 20-25 cm ease from the body measurements.
\nMeasurement Type
\n