reidwitlin PDP: harden hybrid-disclosure hero for no-photo colorways — desaturate flagged representative photo + enlarge/emphasize true-color chip ('Actual color'), per DTD verdict

6d6aabda7245b90cfd939f08431746b34becdccc · 2026-07-07 07:54:46 -0700 · Steve Abrams

Files touched

M public/product.html

Diff

commit 6d6aabda7245b90cfd939f08431746b34becdccc
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 7 07:54:46 2026 -0700

    reidwitlin PDP: harden hybrid-disclosure hero for no-photo colorways — desaturate flagged representative photo + enlarge/emphasize true-color chip ('Actual color'), per DTD verdict
---
 public/product.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/product.html b/public/product.html
index 83a54fe..a85531d 100644
--- a/public/product.html
+++ b/public/product.html
@@ -98,13 +98,13 @@ function priceBox(p){
     <div class="crumbs"><a href="https://www.designerwallcoverings.com">Designer Wallcoverings</a> &nbsp;/&nbsp; <a href="/">${esc(LINE)}</a> &nbsp;/&nbsp; <a href="/#catalog">${esc(p.display_eyebrow||p.series||'')}</a> &nbsp;/&nbsp; ${esc(p.display_name||p.color||p.title)}</div>
     <div class="pdp-top">
       <div class="gallery" style="position:relative">
-        <div class="main" id="main" style="background-image:url('${main}');position:relative">${p.image_note?`<div class="repflag" title="${esc(p.image_note)}" style="position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:5px 10px;background:rgba(20,20,20,.82);color:#fff;font-size:11px;letter-spacing:.04em;border-radius:2px;backdrop-filter:blur(2px)"><span style="width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:${HEXOK?p.hex:'#888'}"></span>Representative — actual color shown in chip</div>`:''}</div>
+        <div class="main" id="main" style="background-image:url('${main}');${p.image_note?'filter:saturate(.5) brightness(.95);':''}position:relative">${p.image_note?`<div class="repflag" title="${esc(p.image_note)}" style="position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:5px 10px;background:rgba(20,20,20,.82);color:#fff;font-size:11px;letter-spacing:.04em;border-radius:2px;backdrop-filter:blur(2px)"><span style="width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:${HEXOK?p.hex:'#888'}"></span>Representative — actual color shown in chip</div>`:''}</div>
         ${imgs.length>1?`<div class="thumbs">${imgs.map((s,i)=>`<div class="t ${i===0?'on':''}" data-s="${s}" style="background-image:url('${s}')"></div>`).join('')}</div>`:''}
       </div>
       <div class="rail">
         <div class="ser">${esc(p.display_eyebrow||p.book||LINE)}</div>
         <h1>${esc(p.display_name||p.color||p.title)}</h1>
-        ${HEXOK?`<div class="truecol" style="display:flex;align-items:center;gap:9px;margin:8px 0 4px;font-size:13px;color:#555"><span title="${esc(p.hex)}" style="width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:${p.hex};flex-shrink:0"></span>${esc(p.color||'')} <span style="opacity:.5;font-variant-numeric:tabular-nums">${esc(p.hex)}</span></div>`:''}
+        ${HEXOK?`<div class="truecol" style="display:flex;align-items:center;gap:${p.image_note?'11px':'9px'};margin:8px 0 4px;font-size:13px;color:#555"><span title="${esc(p.hex)}" style="width:${p.image_note?'34px':'18px'};height:${p.image_note?'34px':'18px'};border-radius:${p.image_note?'7px':'50%'};border:1px solid rgba(0,0,0,.18);background:${p.hex};flex-shrink:0${p.image_note?';box-shadow:0 1px 5px rgba(0,0,0,.16)':''}"></span>${p.image_note?`<b style="font-weight:600;color:#3a3a3a">Actual color</b> · `:''}${esc(p.color||'')} <span style="opacity:.5;font-variant-numeric:tabular-nums">${esc(p.hex)}</span></div>`:''}
         ${p.image_note?`<div class="repnote" style="font-size:11.5px;color:#8a7f6f;margin:2px 0 8px">ℹ︎ ${esc(p.image_note)}. The dot above is the true colorway color.</div>`:''}
         <div class="colr">${esc(VM.name||LINE)} · ${esc(p.sku||'')}${p.material?' · '+esc(p.material):''}</div>
         ${priceBox(p)}

← a4f7fcf Recover 353 per-colorway swatches by filename match — no re- · back to Reidwitlin Landing · Contrarian FIX-FIRST: block sibling-swatch mislabels + harde ff792e8 →