Merchant category markup

<div class="catmark"><div class="product"><span>PRODUCT PAGE</span><div class="icon"></div><b>Canvas day bag</b><small>Travel accessories</small></div><div class="arrow">→</div><div class="schema"><span>CATEGORY FIELD</span><div id="category">Office supplies</div><small id="match">MISMATCH</small></div></div>

.catmark{width:90%;display:flex;align-items:center;justify-content:center;gap:clamp(5px,2vmin,16px);font:800 clamp(10px,2vmin,15px)/1.25 var(--font-sans);color:var(--fg)}.product,.schema{box-sizing:border-box;flex:1;min-width:0;min-height:clamp(100px,22vmin,160px);padding:clamp(7px,1.5vmin,14px);background:var(--surface);border:1px solid var(--line);display:grid;align-content:center;gap:6px;overflow-wrap:anywhere}.product span,.schema span{font-size:1em;color:var(--muted)}.icon{width:33px;height:30px;border:4px solid var(--accent);border-radius:5px 5px 9px 9px;position:relative}.icon:before{content:'';position:absolute;left:6px;right:6px;top:-11px;height:10px;border:3px solid var(--accent);border-bottom:0;border-radius:8px 8px 0 0}.product small,.schema small{font-size:1em;color:var(--accent)}.schema div{border-left:4px solid var(--accent);padding:5px;background:var(--bg)}.arrow{flex:none;color:var(--accent);font-size:clamp(22px,5vmin,38px)}.catmark.matched .schema div{border-color:var(--accent-2)}.catmark.matched .schema small{color:var(--accent-2)}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const box=document.querySelector('.catmark'),category=document.querySelector('#category'),match=document.querySelector('#match');let good=false;function show(){box.classList.toggle('matched',good);category.textContent=good?'Travel accessories':'Office supplies';match.textContent=good?'ALIGNED':'MISMATCH'}setTimeout(()=>{good=true;show()},700);setInterval(()=>{good=!good;show()},3100);