Prijs doorhalen Nieuw

<!-- Prijs doorhalen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pdh">
  <div class="pdh__kaart">
    <img class="pdh__img" src="https://neddev.com/lab-media/prijs-doorhalen-1.webp" alt="Eiken eetkamerstoel met een okergele plaid over de leuning" width="360" height="360" loading="lazy">
    <div class="pdh__info">
      <h3 class="pdh__naam">Eetkamerstoel Vik, massief eiken</h3>
      <p class="pdh__meta">Op voorraad in Utrecht, morgen in huis</p>
      <p class="pdh__prijzen">
        <s class="pdh__oud"><span class="pdh__sr">Oude prijs </span>€ 229</s>
        <span class="pdh__nieuw"><span class="pdh__sr">Nu </span>€ 179</span>
      </p>
      <p class="pdh__bespaar">U bespaart € 50</p>
      <button class="pdh__knop" type="button">Opnieuw afspelen</button>
    </div>
  </div>
</div>
</div>

/* Prijs doorhalen · NedDev · eigen werk. */
.pdh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left}
.pdh__kaart{display:flex;gap:14px;width:100%;max-width:380px;padding:10px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.pdh__img{flex:none;width:42%;max-width:150px;aspect-ratio:1;height:auto;object-fit:cover;border-radius:4px;background:#efedea}
.pdh__info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:2px}
.pdh__naam{margin:0;font-size:14px;font-weight:600;line-height:1.25}
.pdh__meta{margin:4px 0 0;font-size:12px;line-height:1.35;color:#5b5b5b}
.pdh__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pdh__prijzen{display:flex;align-items:baseline;gap:10px;margin:10px 0 0;font-variant-numeric:tabular-nums}
.pdh__oud{position:relative;text-decoration:none;font-size:16px;font-weight:600;color:#0a0a0a;transition:color .3s ease .45s,font-size .3s ease .45s}
.pdh__oud::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:#F5480F;transform:scaleX(0) rotate(-6deg);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.pdh__nieuw{font-size:24px;font-weight:700;letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity .35s ease .6s,transform .45s cubic-bezier(.2,.8,.2,1) .6s}
.pdh__bespaar{margin:6px 0 0;padding:3px 7px;border-radius:4px;background:#F5480F;color:#0a0a0a;font-size:12px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s ease .95s,transform .3s ease .95s}
.pdh.is-af .pdh__oud{color:#6b6b6b;font-size:13px}
.pdh.is-af .pdh__oud::after{transform:scaleX(1) rotate(-6deg)}
.pdh.is-af .pdh__nieuw,.pdh.is-af .pdh__bespaar{opacity:1;transform:none}
.pdh.is-reset *,.pdh.is-reset *::after{transition:none!important}
.pdh__knop{margin-top:auto;min-height:28px;padding:5px 9px;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.pdh__knop:hover{border-color:#0a0a0a}
.pdh__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (max-width:420px){.pdh__kaart{gap:10px}.pdh__img{width:38%}}
@media (prefers-reduced-motion:reduce){.pdh *,.pdh *::after{transition:none!important}.pdh__knop{display:none}}

// Prijs doorhalen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.pdh'); if (!w) return;
    const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (rm) { w.classList.add('is-af'); return; }
    let t = 0;
    const speel = () => {
      w.classList.add('is-reset'); w.classList.remove('is-af'); void w.offsetWidth; w.classList.remove('is-reset');
      clearTimeout(t); t = setTimeout(() => w.classList.add('is-af'), 300);
    };
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver(e => { if (e[0].isIntersecting) { speel(); io.disconnect(); } }, { threshold: .5 });
      io.observe(w);
    } else w.classList.add('is-af');
    w.querySelector('.pdh__knop').addEventListener('click', speel);
}
init(document.querySelector('.jouw-container'));