reidwitlin PDP: fix CSS filter cascade — move repflag chip out of desaturated .main so the in-image true-color chip renders accurate (contrarian catch)

7fac2fd4184e7467e0df7a1fc7c0595c5c7403aa · 2026-07-07 08:12:31 -0700 · Steve Abrams

Files touched

M public/product.html

Diff

commit 7fac2fd4184e7467e0df7a1fc7c0595c5c7403aa
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 7 08:12:31 2026 -0700

    reidwitlin PDP: fix CSS filter cascade — move repflag chip out of desaturated .main so the in-image true-color chip renders accurate (contrarian catch)
---
 public/product.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/product.html b/public/product.html
index a85531d..82258bd 100644
--- a/public/product.html
+++ b/public/product.html
@@ -98,7 +98,7 @@ 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}');${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>
+        <div class="main" id="main" style="background-image:url('${main}');${p.image_note?'filter:saturate(.5) brightness(.95);':''}position:relative"></div>${p.image_note?`<div class="repflag" title="${esc(p.image_note)}" style="position:absolute;left:10px;bottom:10px;z-index:2;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>`:''}
         ${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">

← ff792e8 Contrarian FIX-FIRST: block sibling-swatch mislabels + harde · back to Reidwitlin Landing · reidwitlin: enforce own-photo-or-draft — hide 197 no-own-pho 4535dde →