Loyalty member pricing

<div class="lp"><div class="lp-card"><div class="lp-art"></div><div><span id="lp-state">PUBLIC OFFER</span><strong>CANVAS TOTE</strong><b id="lp-price">$48</b><span id="lp-perk">STANDARD SHIPPING</span></div></div><button type="button" id="lp-toggle">VIEW MEMBER OFFER →</button></div>

.lp{width:min(90%,460px);font:700 clamp(10px,1vw,14px)/1.2 sans-serif}.lp-card{display:flex;gap:clamp(7px,2vmin,16px);align-items:center;border:2px solid var(--fg);background:var(--surface);padding:clamp(8px,2vmin,18px)}.lp-art{width:36%;aspect-ratio:1;background:linear-gradient(135deg,var(--accent-3),var(--accent-2));flex:none}.lp-card>div:last-child{display:grid;gap:clamp(3px,1vmin,8px)}.lp-card span{color:var(--muted)}.lp-card strong{font-size:clamp(12px,1.3vw,18px)}.lp-card b{font-size:clamp(24px,3vw,42px);color:var(--accent);transition:.35s}.lp.member .lp-card{border-color:var(--accent)}.lp.member .lp-art{background:linear-gradient(135deg,var(--accent),var(--accent-2))}.lp button{width:100%;border:0;background:var(--fg);color:var(--bg);padding:clamp(7px,1.5vmin,12px);margin-top:6px;font:inherit;text-align:left;cursor:pointer}

const root=document.querySelector('.lp'),state=document.querySelector('#lp-state'),price=document.querySelector('#lp-price'),perk=document.querySelector('#lp-perk'),button=document.querySelector('#lp-toggle');function toggle(){const member=root.classList.toggle('member');state.textContent=member?'MEMBER OFFER':'PUBLIC OFFER';price.textContent=member?'$42':'$48';perk.textContent=member?'MEMBER DELIVERY':'STANDARD SHIPPING';button.textContent=member?'VIEW PUBLIC OFFER →':'VIEW MEMBER OFFER →'}button.addEventListener('click',toggle);setTimeout(toggle,750);setInterval(toggle,3900);