\n \n
\n `;\n document.body.appendChild(d);\n const view = ref(d, 'view'), flip = ref(d, 'flip');\n const imgs = [], dots = [];\n for (let i = 0; i < 6; i++) {\n const im = document.createElement('img');\n im.alt = ''; im.draggable = false; im.decoding = 'async';\n ref(d, 'frames').appendChild(im); imgs.push(im);\n dots.push(ref(d, 'dots').appendChild(document.createElement('i')));\n }\n let angle = 0, down = false, sx = 0, base = 0;\n const setAngle = (n) => {\n angle = ((n % 6) + 6) % 6;\n imgs.forEach((im, i) => im.classList.toggle('on', i === angle));\n dots.forEach((t, i) => t.classList.toggle('on', i === angle));\n };\n const setFlip = (on) => {\n view.classList.toggle('flip', on);\n flip.setAttribute('aria-pressed', String(on));\n flip.textContent = on ? 'See the sock' : 'See the sole';\n };\n const step = () => Math.max(26, view.getBoundingClientRect().width / 9);\n view.addEventListener('pointerdown', (e) => { down = true; sx = e.clientX; base = angle; view.setPointerCapture(e.pointerId); });\n view.addEventListener('pointermove', (e) => {\n if (!down) return;\n const n = Math.round((e.clientX - sx) / step());\n if (n !== 0) view.classList.add('moved');\n setAngle(base + n);\n });\n view.addEventListener('pointerup', () => { down = false; });\n view.addEventListener('pointercancel', () => { down = false; });\n view.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowRight') { setAngle(angle + 1); view.classList.add('moved'); e.preventDefault(); }\n if (e.key === 'ArrowLeft') { setAngle(angle - 1); view.classList.add('moved'); e.preventDefault(); }\n });\n flip.addEventListener('click', () => setFlip(!view.classList.contains('flip')));\n ref(d, 'close').addEventListener('click', () => d.close());\n d.addEventListener('click', (e) => { if (e.target === d) d.close(); });\n d.addEventListener('close', () => document.body.classList.remove('is-locked'));\n spin = {\n open(set) {\n imgs.forEach((im, i) => { im.src = set.f[i]; });\n imgs[0].alt = `Power Paws sock in ${set.n}`;\n ref(d, 'sole').src = set.s;\n ref(d, 'tag').textContent = set.n;\n view.style.background = set.bg;\n view.classList.toggle('is-white', !!set.w);\n view.classList.remove('moved');\n setFlip(false); setAngle(0);\n document.body.classList.add('is-locked');\n d.showModal();\n view.focus();\n },\n };\n return spin;\n}\ndocument.addEventListener('click', (e) => {\n const b = e.target.closest('[data-ww-spin]');\n if (!b) return;\n e.preventDefault();\n spinDialog().open(JSON.parse(b.dataset.wwSpin));\n});\n\n/* \u2500\u2500 variant pickers: once a preceding option is chosen, a selected value that can't be bought\n moves to the first value that can (unavailable values are hidden in ww-horizon.css) \u2500\u2500 */\nfunction pickAvailable(picker) {\n for (const fs of $$('fieldset', picker)) {\n const cur = $('input[data-current-checked=\"true\"]', fs) || $('input:checked', fs);\n if (!cur || cur.dataset.optionAvailable !== 'false') continue;\n const ok = $('input[data-option-available=\"true\"]', fs);\n if (ok) ok.click();\n return;\n }\n}\nlet pickQueued = false;\nnew MutationObserver(() => {\n if (pickQueued) return;\n pickQueued = true;\n requestAnimationFrame(() => { pickQueued = false; $$('variant-picker').forEach(pickAvailable); });\n}).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['data-option-available', 'data-current-checked'] });\ncustomElements.whenDefined('variant-picker').then(() => $$('variant-picker').forEach(pickAvailable));\n\n/* accessory cards: add the chosen variant */\ndocument.addEventListener('change', (e) => {\n const sel = e.target.closest('.xc select[data-r=\"variant\"]');\n if (!sel) return;\n const price = ref(sel.closest('.xc'), 'price');\n if (price) price.textContent = sel.selectedOptions[0]?.dataset.price || '';\n});\ndocument.addEventListener('click', async (e) => {\n const b = e.target.closest('[data-ww-add]');\n if (!b || b.disabled) return;\n const id = ref(b.closest('.xc'), 'variant')?.value;\n if (!id) return;\n b.disabled = true;\n try {\n await addToCart(id, 1, b);\n toast(`${b.dataset.name} added`);\n } catch (err) {\n toast(err.message);\n } finally {\n b.disabled = false;\n }\n});\n\n/* \u2500\u2500 terrain: vertical scroll drives a horizontal strip \u2500\u2500 */\nclass WWTerrain extends HTMLElement {\n connectedCallback() {\n const v = ref(this, 'view'), track = ref(this, 'track');\n let maxX = 0, on = false;\n const measure = () => {\n on = innerWidth >= 900 && !designMode;\n if (!on) { this.style.height = ''; track.style.transform = ''; return; }\n maxX = Math.max(0, track.scrollWidth - v.clientWidth);\n this.style.height = innerHeight + maxX + 'px';\n };\n const update = () => {\n if (!on) return;\n const r = this.getBoundingClientRect();\n const total = this.offsetHeight - innerHeight;\n const p = clamp(-r.top / (total || 1), 0, 1);\n track.style.transform = `translate3d(${-p * maxX}px,0,0)`;\n };\n new ResizeObserver(() => { measure(); update(); }).observe(track);\n addEventListener('resize', () => { measure(); update(); }, { passive: true });\n addEventListener('scroll', update, { passive: true });\n measure(); update();\n autoSlide(v, [...track.children]);\n }\n}\n\n/* \u2500\u2500 fit finder \u2500\u2500 */\nclass WWFit extends HTMLElement {\n connectedCallback() {\n const rows = JSON.parse(ref(this, 'data').textContent);\n const MIN = { std: +this.dataset.minStd || 5, hound: +this.dataset.minHound || 6 };\n const MAX = { std: +this.dataset.maxStd || 240, hound: +this.dataset.maxHound || 120 };\n const PDF = { std: this.dataset.pdfStd, hound: this.dataset.pdfHound };\n const rng = ref(this, 'rng'), scale = ref(this, 'scale'), paws = $$('button', ref(this, 'paws'));\n const pdf = ref(this, 'pdf'), guide = ref(this, 'guide');\n let shape = 'std';\n const table = () => {\n const t = rows.filter((r) => r.shape === shape).sort((a, b) => a.b - b.b);\n return t.map((r, i) => ({ ...r, a: i ? t[i - 1].b : MIN[shape] }));\n };\n const cap = () => {\n rng.min = MIN[shape];\n rng.max = MAX[shape];\n rng.value = clamp(+rng.value, MIN[shape], MAX[shape]);\n ref(this, 'min').textContent = MIN[shape] + ' lb';\n ref(this, 'max').textContent = MAX[shape] + ' lb';\n if (pdf) { pdf.hidden = !PDF[shape]; if (PDF[shape]) pdf.href = PDF[shape]; }\n };\n const showChart = (s) => {\n $$('[data-s]', ref(this, 'guide-tabs')).forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.s === s)));\n $$('.ww-guide__img', guide).forEach((el) => { el.hidden = el.dataset.s !== s; });\n };\n $$('[data-s]', ref(this, 'guide-tabs')).forEach((b) => b.addEventListener('click', () => showChart(b.dataset.s)));\n ref(this, 'guide-open')?.addEventListener('click', () => {\n showChart(shape);\n document.body.classList.add('is-locked');\n guide.showModal();\n });\n ref(this, 'guide-close').addEventListener('click', () => guide.close());\n guide.addEventListener('click', (e) => { if (e.target === guide) guide.close(); });\n guide.addEventListener('close', () => document.body.classList.remove('is-locked'));\n const draw = () => {\n scale.innerHTML = table().map((r) => `\n \n ![\"Sole]()
\n ↔ Drag to rotate\n
\n ${r.s}
`).join('');\n };\n const apply = () => {\n const w = +rng.value, t = table();\n ref(this, 'wt').textContent = w;\n if (!t.length) return;\n let i = t.findIndex((r) => w < r.b);\n if (i < 0) i = t.length - 1;\n const r = t[i];\n ref(this, 'code').textContent = r.s;\n ref(this, 'range').textContent = r.t;\n ref(this, 'breeds').textContent = r.d;\n ref(this, 'shape').textContent = $(`[data-s=\"${shape}\"] b`, this)?.textContent || '';\n $$('.scale__s', scale).forEach((el, k) => el.classList.toggle('on', k === i));\n };\n rng.addEventListener('input', apply);\n paws.forEach((b) => b.addEventListener('click', () => {\n shape = b.dataset.s;\n paws.forEach((x) => x.setAttribute('aria-pressed', String(x === b)));\n cap(); draw(); apply();\n }));\n cap(); draw(); apply();\n }\n}\n\n/* \u2500\u2500 paw trail (home page) \u2500\u2500 */\nfunction pawTrail() {\n const layer = $('[data-ww-trail]');\n if (!layer || innerWidth < 760 || layer.childElementCount) return;\n const N = clamp(Math.round(layer.offsetHeight / 150), 60, 220);\n const frag = document.createDocumentFragment();\n [{ phase: 0, side: 50 }, { phase: Math.PI, side: 50 }].forEach((tr) => {\n for (let i = 0; i < N; i++) {\n const t = i / (N - 1);\n const gait = (i % 2 ? 1 : -1) * 3.4;\n const wave = Math.sin(t * Math.PI * 9 + tr.phase);\n const x = tr.side + wave * 40 + gait;\n const y = 0.5 + t * 99;\n const r = wave * 34 + (i % 2 ? 11 : -11) + (i % 3) * 4;\n const size = Math.round(80 + Math.sin(t * Math.PI * 14 + tr.phase) * 24);\n const el = document.createElement('i');\n el.style.cssText = `left:${x}%;top:${y}%;width:${size}px;height:${size}px;--r:${r}deg`;\n el.innerHTML = PAW;\n frag.appendChild(el);\n }\n });\n layer.appendChild(frag);\n const ob = new IntersectionObserver((es) => es.forEach((e) => {\n if (e.isIntersecting) { e.target.classList.add('on'); ob.unobserve(e.target); }\n }), { rootMargin: '0px 0px -8% 0px', threshold: 0 });\n [...layer.children].forEach((el) => ob.observe(el));\n}\nif (document.readyState === 'complete') pawTrail(); else addEventListener('load', pawTrail);\n\n/* \u2500\u2500 FAQ deep links open the answer they point at \u2500\u2500 */\nfunction openTarget(id) {\n const t = id && document.getElementById(id);\n if (!t) return false;\n const d = t.matches('details') ? t : t.closest('details');\n if (!d) return false;\n d.open = true;\n t.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' });\n return true;\n}\ndocument.addEventListener('click', (e) => {\n const a = e.target.closest('a[href*=\"#\"]');\n if (!a || a.origin !== location.origin || a.pathname !== location.pathname) return;\n const id = decodeURIComponent(a.hash.slice(1));\n if (openTarget(id)) { e.preventDefault(); history.replaceState(null, '', '#' + id); }\n});\nif (location.hash) addEventListener('load', () => openTarget(decodeURIComponent(location.hash.slice(1))));\n\n/* \u2500\u2500 product page size guide (snippets/ww-size-guide): delegated, the variant picker is re-rendered on every change \u2500\u2500 */\nconst guideShow = (d, s) => {\n $$('.ww-guide__tabs [data-s]', d).forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.s === s)));\n $$('.ww-guide__img', d).forEach((el) => { el.hidden = el.dataset.s !== s; });\n};\ndocument.addEventListener('click', (e) => {\n const open = e.target.closest('[data-ww-guide]');\n if (open) {\n const d = open.parentElement.querySelector('dialog');\n guideShow(d, open.dataset.wwGuide);\n document.body.classList.add('is-locked');\n d.showModal();\n return;\n }\n const d = e.target.closest('dialog.ww-sg__dlg');\n if (!d) return;\n const tab = e.target.closest('.ww-guide__tabs [data-s]');\n if (tab) guideShow(d, tab.dataset.s);\n else if (e.target === d || e.target.closest('[data-ww-guide-close]')) d.close();\n});\ndocument.addEventListener('close', (e) => { if (e.target.matches?.('dialog.ww-sg__dlg')) document.body.classList.remove('is-locked'); }, true);\n\n/* \u2500\u2500 photo zoom (sections/ww-friends): a cropped circle opens the whole photo; falls back to the circle's image \u2500\u2500 */\nlet zoomDlg;\ndocument.addEventListener('click', (e) => {\n const b = e.target.closest('[data-ww-zoom]');\n if (!b) return;\n if (!zoomDlg) {\n zoomDlg = document.createElement('dialog');\n zoomDlg.className = 'ww ww-spin ww-zoom';\n zoomDlg.innerHTML = '