Dw Collections Viewer

renderDetail() injects a giant template-literal HTML block via
innerHTML; that block contains a nested <script>(restore deploy-sort)</script>
helper. Browsers' HTML tokenizer doesn't respect JS template literals — when
it hits the inner </script>, it terminates the OUTER <script> block too.
Everything after that closing tag (including the outer template's closing
backtick) became raw HTML, leaving the main JS body unterminated:
'Unexpected end of input'. Page rendered shell only, no site cards.

Fix: split the open tag as <` + `script> and escape the close as <\/script>
inside the template literal. Tokenizer no longer sees a script boundary.

Verified via debate-team-fast (Claude + Kimi + Qwen3 all 3/3): correct fix.
Future refactor (ticket): move the inline restore script OUT of the template
literal entirely (data-attribute + DOMContentLoaded hook). Add a pre-commit
grep for unescaped </script> inside backtick template literals.

Steve flagged: many hero images look blurry full-page because the source is
a small Shopify variant (e.g. 480x480). Two fixes:

1. largestShopifyImage(url) — strips _NxN size suffix from any
   cdn.shopify.com / designerwallcoverings.com URL so the master is fetched
   for both card thumbnails AND drag-drop hero pins.

2. Resolution probe + badges — every product card now shows a HD/MED/SD
   badge in its top-right after the natural image dimensions are probed
   client-side (concurrency 6, sessionStorage cached). Tier rules:
     ≥ 1500 px largest side → HD (green)
     ≥ 800  px              → MED (gold)
     <  800  px             → SD (red)
   SD cards fade to 55% opacity to push you toward HD picks.

3. Hero panel banner — when a site is selected, a banner above the assigned-
   collections section reports whether the current hero is HD/MED/SD with
   the actual dimensions; SD shows a 'WILL LOOK BLURRY' warning.

4. 'HD only' filter checkbox in the products bar — hides all non-HD cards.

5. Products-bar count line now shows '23 HD · 12 MED · 4 SD · 8 probing'.

Cork live site already pushed with the upscale logic; 45 other sites
re-patched locally pending deploy.

Steve noticed several site cards showed wrong heroes — they're nginx 301/302
redirects to consolidation domains, and the admin's screenshot probe was
showing the redirect target's hero. Misleading.

This change adds a HEAD probe + banner so consolidated sites are honest:

- New POST /api/sites/probe — HEAD-checks every site over HTTPS, parallelism 8,
  caches { http_status, redirect_target, probed_at } in data/site-status.json
- listSites() merges the probe cache into each site row
- index.html: new 📡 Probe live button in the toolbar; cards with 3xx render
  a gold redirect banner overlaying the hero ('→ <target> (301)') AND fade
  to 0.55 opacity so the redirect chain stops looking like a bug
- Cards with HTTP 0/5xx render a red 'offline' banner

Verified live: 46 sites probed in one click, 43 ok / 2 redirects (string→
linen, embroidered→fabric) / 1 offline. Banners render correctly.

Three new affordances on the right detail panel:

1. Drag any product card onto the cover image to set it as the hero.
   - .pcard is now draggable=true with a custom MIME (application/x-dwc-product)
     carrying { sku, image, title }
   - .hero-large catches dragover/drop, highlights via existing dropzone-active
     CSS, then POSTs the sku to the existing /api/site/:slug/hero endpoint
   - Optimistic local update + toast confirmation; renderDetail() re-renders
     so the cover swaps without a fetch round-trip

2. Sort dropdown — newest (default), Color (clusters black→white→warm→cool→
   purple buckets via tag matching), Style (Traditional/Modern/Floral/etc.
   buckets), SKU (alpha). Selection persists in localStorage as 'dwc_sort'.

3. Grid card-width slider — 80px to 260px, live-updates
   grid-template-columns:repeat(auto-fill,minmax(N,1fr)) without re-render.
   Persists as 'dwc_size' in localStorage.

Verified end-to-end via headless Playwright: 4-option sort dropdown live,
50/50 cards draggable, drop simulation flips hero img src as expected.

Previous .products-slider .row was a horizontal flex with 110px cards and
overflow-x:auto — only ~6 cards visible at a time, lots of horizontal
scrolling to see everything.

Now: display:grid, grid-template-columns:repeat(auto-fill,minmax(140px,1fr)),
gap:10px. Every product visible at once; cards bigger (140-200+ px) and
labels can wrap to 2 lines via -webkit-line-clamp:2 with min-height:32px so
rows align. Selection, bulk-remove, copy SKUs all unchanged.