Doorlopende USP-balk Nieuw

<!-- Doorlopende USP-balk · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="but">
  <div class="but__bar" aria-label="Voordelen">
    <ul class="but__track">
      <li><b>Gratis verzending</b> vanaf € 35</li>
      <li>Klanten geven ons een <b>9,1 op Kiyoh</b></li>
      <li>Voor <b>23:00 besteld</b>, morgen in huis</li>
      <li>Binnen <b>3 dagen na branden</b> verstuurd</li>
      <li>Niet lekker? <b>Geld terug</b></li>
    </ul>
  </div>
  <div class="but__head">
    <a href="#" class="but__logo">Bonenkamp<span>koffiebranderij · Deventer</span></a>
    <label class="but__search"><span class="but__sr">Zoeken</span><input type="search" placeholder="Zoek op herkomst of smaak"></label>
    <ul class="but__nav"><li><a href="#">Koffie</a></li><li><a href="#">Abonnement</a></li><li><a href="#">Zetmateriaal</a></li></ul>
    <a href="#" class="but__cart">Winkelmand <span class="but__count">2</span></a>
  </div>
  <div class="but__shelf">
    <div class="but__intro"><span class="but__eyebrow">Deze week gebrand</span><p class="but__title">Vers van de brander, op dinsdag en vrijdag</p></div>
    <div class="but__prod"><span class="but__bag but__bag--a" aria-hidden="true"></span><b>Ethiopië Yirgacheffe</b><span>Bloemig, citrus · 250 g</span><em>€ 9,95</em></div>
    <div class="but__prod"><span class="but__bag but__bag--b" aria-hidden="true"></span><b>Brazilië Cerrado</b><span>Noten, cacao · 1 kg</span><em>€ 27,50</em></div>
    <div class="but__prod"><span class="but__bag but__bag--c" aria-hidden="true"></span><b>Huismelange Deventer</b><span>Vol, voor espresso · 1 kg</span><em>€ 24,95</em></div>
  </div>
</div>
</div>

/* Doorlopende USP-balk · NedDev · eigen werk. */
.but{position:relative;width:100%;align-self:flex-start;flex:none;min-height:420px;background:#f7f1e8;color:#2b1d14;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.but *{box-sizing:border-box}
.but__bar{background:#2b1d14;color:#f7f1e8;overflow:hidden;height:38px;display:flex;align-items:center}
.but__track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:but-run 32s linear infinite}
.but__bar:hover .but__track,.but__bar:focus-within .but__track{animation-play-state:paused}
.but__track li{font-size:13px;white-space:nowrap;padding:0 28px;position:relative;color:rgba(247,241,232,.8)}
.but__track li b{color:#e2ad6b;font-weight:600}
.but__track li::after{content:'';position:absolute;right:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#e2ad6b}
@keyframes but-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.but__head{display:flex;align-items:center;gap:24px;padding:16px 32px;background:#fff;border-bottom:1px solid #eadfcd}
.but__logo{font-family:Georgia,serif;font-size:24px;font-weight:700;color:#2b1d14;text-decoration:none;display:flex;flex-direction:column;line-height:1}
.but__logo span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.1em;color:#8a6a4c;margin-top:4px}
.but__search{flex:1;max-width:340px}
.but__search input{width:100%;border:1px solid #d9c9b1;background:#fbf8f3;border-radius:999px;padding:10px 16px;font:14px 'Switzer',sans-serif;color:#2b1d14;outline:none}
.but__search input:focus{border-color:#2b1d14}
.but__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.but__nav{list-style:none;display:flex;gap:20px;margin:0 0 0 auto;padding:0}
.but__nav a{font-size:15px;color:#2b1d14;text-decoration:none}
.but__nav a:hover{text-decoration:underline;text-underline-offset:4px}
.but__cart{display:flex;align-items:center;gap:8px;background:#2b1d14;color:#f7f1e8;text-decoration:none;font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px}
.but__count{background:#e2ad6b;color:#2b1d14;border-radius:999px;font-size:12px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.but__shelf{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:18px;padding:36px 32px}
.but__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a0683a}
.but__title{font-family:Georgia,serif;font-size:clamp(24px,2.8vw,32px);line-height:1.15;margin:10px 0 0}
.but__prod{background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:3px}
.but__prod b{font-size:15px}.but__prod span{font-size:13px;color:#7a6250}.but__prod em{font-style:normal;font-weight:700;margin-top:6px}
.but__bag{display:block;height:110px;border-radius:4px;margin-bottom:10px;position:relative}
.but__bag::after{content:'';position:absolute;left:30%;right:30%;top:16%;bottom:10%;border-radius:3px 3px 6px 6px;background:#fff;opacity:.9;clip-path:polygon(8% 0,92% 0,100% 12%,100% 100%,0 100%,0 12%)}
.but__bag--a{background:#e9c46a}.but__bag--b{background:#7d9b76}.but__bag--c{background:#b5654a}
@media(max-width:900px){.but__nav{display:none}.but__shelf{grid-template-columns:1fr 1fr}.but__intro{grid-column:1/-1}}
@media(max-width:600px){
.but__head{flex-wrap:wrap;padding:12px 16px;gap:10px}
.but__logo{font-size:20px}.but__logo span{display:none}
.but__cart{margin-left:auto}
.but__search{order:3;flex-basis:100%;max-width:none}
.but__shelf{grid-template-columns:1fr;padding:24px 16px}
.but__prod{display:grid;grid-template-columns:64px 1fr;column-gap:12px}
.but__bag{grid-row:1/5;height:64px;margin:0}}
@media(prefers-reduced-motion:reduce){.but__track{animation:none;width:100%;justify-content:center}.but__track li[aria-hidden]{display:none}}

// Doorlopende USP-balk · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.but');if(!w)return;
var tr=w.querySelector('.but__track'),bar=w.querySelector('.but__bar');
var orig=Array.prototype.slice.call(tr.children);
function clone(){var c;orig.forEach(function(li){c=li.cloneNode(true);c.setAttribute('aria-hidden','true');tr.appendChild(c);});}
// Eerste helft moet minstens zo breed zijn als de balk; daarna exact verdubbelen zodat -50% zonder sprong doorloopt.
var setW=tr.scrollWidth||1,reps=Math.max(1,Math.ceil(bar.clientWidth/setW));
for(var i=1;i<reps;i++)clone();
for(var j=0;j<reps;j++)clone();
tr.style.animationDuration=(32*reps)+'s';
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));