번들 가격

<div class="bundle"><div class="items"><button data-price="24" class="on">A <small>$24</small></button><span>+</span><button data-price="18" class="on">B <small>$18</small></button><span>+</span><button data-price="12" class="on">C <small>$12</small></button></div><div class="totals"><div>SEPARATE <s id="sum">$54</s></div><div class="deal">BUNDLE <strong id="deal">$42</strong></div></div><div class="hint">TAP ITEMS TO COMPARE</div></div>

.bundle{width:min(94%,570px);font:800 clamp(9px,1.8vmin,15px)/1.2 sans-serif}.items{display:flex;justify-content:center;align-items:center;gap:clamp(4px,1vw,14px)}.items button{width:clamp(52px,15vmin,120px);height:clamp(52px,15vmin,120px);border:2px solid var(--line);background:var(--surface);color:var(--fg);font:900 clamp(18px,4vmin,38px)/1 sans-serif;cursor:pointer;transition:.25s}.items button.on{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}.items button:not(.on){opacity:.4}.items small{display:block;margin-top:5px;font-size:clamp(9px,1.7vmin,14px)}.totals{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(15px,4vmin,30px);gap:10px}.totals>div{background:var(--surface);padding:clamp(8px,2vmin,16px);border:1px solid var(--line);flex:1}.totals s,.totals strong{display:block;margin-top:4px;font-size:clamp(17px,4vmin,34px)}.deal{color:var(--accent)}.hint{text-align:center;color:var(--muted);margin-top:10px;font-size:clamp(8px,1.5vmin,12px);letter-spacing:.1em}

const buttons=[...document.querySelectorAll('[data-price]')];const sum=document.querySelector('#sum');const deal=document.querySelector('#deal');function update(){const total=buttons.filter(b=>b.classList.contains('on')).reduce((n,b)=>n+Number(b.dataset.price),0);sum.textContent='$'+total;deal.textContent='$'+Math.max(0,total-(buttons.every(b=>b.classList.contains('on'))?12:0))}buttons.forEach(b=>b.addEventListener('click',()=>{b.classList.toggle('on');update()}));setTimeout(()=>{buttons[2].classList.remove('on');update()},700);setTimeout(()=>{buttons[2].classList.add('on');update()},1500);