Productkaarten · 3 varianten Nieuw

<!-- Productkaarten · 3 varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pkt">
<article class="pkt__v">
<img class="pkt__foto" src="https://neddev.com/lab-media/productkaart-set-1.webp" alt="Stoneware mok in gebroken wit" width="800" height="436">
<div class="pkt__vb"><h3 class="pkt__n">Mok Duin</h3><p class="pkt__m">Gebroken wit · Atelier Klei, Leiden</p>
<div class="pkt__koop"><p class="pkt__p">€ 24,95</p><button class="pkt__btn pkt__mand" type="button">In mand</button></div></div>
<p class="pkt__sr" aria-live="polite"></p>
</article>
<article class="pkt__h">
<img class="pkt__th pkt__kus" src="https://neddev.com/lab-media/productkaart-set-2.webp" alt="" width="800" height="436">
<div class="pkt__hb"><h3 class="pkt__n">Kussen linnen</h3><p class="pkt__p">€ 39,00 <span class="pkt__kl">· roest</span></p>
<div class="pkt__sw" role="radiogroup" aria-label="Kleur">
<label class="pkt__s pkt__s--roest"><input type="radio" name="pkt-kleur" value="roest" checked aria-label="Roest"></label>
<label class="pkt__s pkt__s--zand"><input type="radio" name="pkt-kleur" value="zand" aria-label="Zand"></label>
<label class="pkt__s pkt__s--zwart"><input type="radio" name="pkt-kleur" value="antraciet" aria-label="Antraciet"></label>
</div><p class="pkt__lev">Voor 22:00 besteld, morgen in huis</p></div>
</article>
<article class="pkt__h">
<img class="pkt__th" src="https://neddev.com/lab-media/productkaart-set-3.webp" alt="" width="800" height="436">
<div class="pkt__hb"><h3 class="pkt__n">Lamp Vos</h3><p class="pkt__p"><s><span class="pkt__sro">Was </span>€ 89,00</s> <strong><span class="pkt__sro">nu </span>€ 69,00</strong></p><p class="pkt__vr">Nog 3 op voorraad</p></div>
<button class="pkt__hart" type="button" aria-pressed="false"><span class="pkt__sro">Bewaar lamp Vos</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button>
</article>
</div>
</div>

/* Productkaarten · 3 varianten · NedDev · eigen werk. */
.pkt{position:absolute;inset:0;display:grid;grid-template-columns:40% 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:9px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left;container-type:size}
.pkt *{box-sizing:border-box}
.pkt__sro,.pkt__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pkt__v{position:relative;grid-row:1/3;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pkt__foto{flex:1;min-height:0;width:100%;object-fit:cover;display:block;background:#e6e3de}
.pkt__vb{padding:8px 9px 9px}
.pkt__n{margin:0;font-size:13px;line-height:1.2;font-weight:700}
.pkt__m{margin:1px 0 0;font-size:12px;line-height:1.3;color:#4a4a4a}
.pkt__lev{margin:4px 0 0;font-size:12px;color:#4a4a4a}
.pkt__koop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.pkt__p{margin:1px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pkt__p s{color:#6a6a6a;font-weight:400}
.pkt__p strong{color:#c43a0b}
.pkt__kl{font-weight:400;color:#4a4a4a}
.pkt__btn{min-height:28px;padding:0 10px;border:1px solid #0a0a0a;border-radius:4px;background:#0a0a0a;color:#fff;font:600 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.pkt__btn:hover{background:#F5480F;border-color:#F5480F;color:#0a0a0a}
.pkt__btn.is-ok{background:#fff;color:#0a0a0a}
.pkt__btn:focus-visible,.pkt__hart:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.pkt__h{position:relative;display:grid;grid-template-columns:64px 1fr;gap:9px;align-items:start;align-content:center;min-height:0;padding:8px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pkt__th{width:64px;height:64px;border-radius:4px;object-fit:cover;display:block;background:#e6e3de;transition:filter .25s}
.pkt__hb{min-width:0;padding-right:4px}
.pkt__h:last-child .pkt__hb{padding-right:28px}
.pkt__sw{display:flex;gap:4px;margin-top:4px}
.pkt__s{position:relative;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.pkt__s::before{content:'';width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,10,.2)}
.pkt__s--roest::before{background:#b4532a}.pkt__s--zand::before{background:#d9c9a8}.pkt__s--zwart::before{background:#3a3a3a}
.pkt__s input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.pkt__s:has(input:checked){box-shadow:0 0 0 2px #0a0a0a}
.pkt__s:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.pkt__kus.is-zand{filter:saturate(.25) brightness(1.18) sepia(.35)}
.pkt__kus.is-antraciet{filter:grayscale(1) brightness(.62) contrast(1.1)}
.pkt__vr{margin:3px 0 0;font-size:12px;color:#8a2c08}
.pkt__hart{position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer}
.pkt__hart svg{width:18px;height:18px;fill:none;stroke:#0a0a0a;stroke-width:1.8;transition:fill .15s}
.pkt__hart[aria-pressed="true"] svg{fill:#F5480F;stroke:#F5480F}
.pkt__hart:hover{background:#f4f3f1}
@container (max-height:230px){.pkt__lev{display:none}.pkt__m{display:none}.pkt__h{grid-template-columns:48px 1fr;gap:8px}.pkt__th{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.pkt__th,.pkt__btn,.pkt__hart svg{transition:none}}

// Productkaarten · 3 varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.pkt'), mand = w.querySelector('.pkt__mand'), sr = w.querySelector('.pkt__sr'), n = 0, t = 0;
    mand.addEventListener('click', function () {
      n++; mand.textContent = 'In mand (' + n + ')'; mand.classList.add('is-ok');
      sr.textContent = 'Mok Duin toegevoegd aan je winkelmand. Totaal ' + n + ' stuks.';
      clearTimeout(t); t = setTimeout(function () { mand.classList.remove('is-ok'); }, 1400);
    });
    var kus = w.querySelector('.pkt__kus'), kl = w.querySelector('.pkt__kl');
    [].forEach.call(w.querySelectorAll('input[name="pkt-kleur"]'), function (r) {
      r.addEventListener('change', function () { kus.className = 'pkt__th pkt__kus is-' + r.value; kl.textContent = '· ' + r.value; });
    });
    var h = w.querySelector('.pkt__hart');
    h.addEventListener('click', function () { var on = h.getAttribute('aria-pressed') !== 'true'; h.setAttribute('aria-pressed', String(on)); h.querySelector('.pkt__sro').textContent = on ? 'Lamp Vos bewaard, klik om te verwijderen' : 'Bewaar lamp Vos'; });
}
init(document.querySelector('.jouw-container'));