Ebbinge Koffiebranderij · webshop, Groningen New

<!-- Ebbinge Koffiebranderij · webshop, Groningen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ebk">
<div class="ebk__ann"><div class="ebk__wrap ebk__ann-in">
  <span>Op werkdagen voor 14:00 besteld, morgen in huis</span><span class="ebk__ann-x">Gratis verzending vanaf € 35</span><span class="ebk__ann-x">Gebrand op maandag en donderdag</span>
</div></div>

<div class="ebk__head" role="banner"><div class="ebk__wrap ebk__head-in">
  <button class="ebk__burger" type="button" aria-label="Menu" aria-expanded="false"><svg viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18"/></svg></button>
  <a href="#" class="ebk__logo" aria-label="Ebbinge Koffiebranderij"><svg viewBox="0 0 40 40" aria-hidden="true"><ellipse cx="20" cy="20" rx="11" ry="16" transform="rotate(28 20 20)"/><path d="M14 9c6 6 6 16 12 22"/></svg><span>Ebbinge<small>Koffiebranderij · Groningen</small></span></a>
  <label class="ebk__search"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg><input type="search" placeholder="Zoek op herkomst, smaak of zetmethode" aria-label="Zoeken"></label>
  <div class="ebk__acts">
    <a href="#" class="ebk__act"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg><span>Account</span></a>
    <a href="#" class="ebk__act ebk__cart"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 8h14l-1.2 12H6.2z"/><path d="M9 8V6a3 3 0 016 0v2"/></svg><span>Mand <b class="ebk__cart-n">0</b></span><em class="ebk__cart-t">€ 0,00</em></a>
  </div>
</div>
<div class="ebk__cats" role="navigation" aria-label="Categorieën"><div class="ebk__wrap ebk__cats-in">
  <a href="#ebk-shop" class="is-on">Koffiebonen</a><a href="#ebk-abo">Abonnement</a><a href="#ebk-shop">Proefpakketten</a><a href="#">Zetmateriaal</a><a href="#">Cadeaus</a><a href="#">Zakelijk</a><a href="#ebk-brand">De branderij</a>
</div></div>
<div class="ebk__toast" role="status" aria-live="polite"></div>
</div>

<div class="ebk__hero"><div class="ebk__wrap ebk__hero-in">
  <a href="#ebk-pdp" class="ebk__hero-main">
    <img src="https://neddev.com/lab-media/site-webshop-5.webp" alt="De branderij aan het Boterdiep met de trommelbrander en verse bonen in de koelbak">
    <span class="ebk__hero-txt">
      <span class="ebk__pill">Nieuwe oogst · batch 0417</span>
      <span class="ebk__h1">Pink Bourbon uit Huila, Colombia</span>
      <span class="ebk__hero-sub">Framboos, rozenbottel en panela. Licht gebrand voor filter, 92 kilo binnen.</span>
      <span class="ebk__hero-cta">Bekijk de koffie <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
    </span>
  </a>
  <div class="ebk__hero-side">
    <a href="#ebk-shop" class="ebk__promo ebk__promo--a"><span class="ebk__promo-k">Proefpakket</span><span class="ebk__promo-h">3 koffies van 250 gram, om je smaak te vinden</span><span class="ebk__promo-p"><s>€ 39,40</s> € 32,50</span></a>
    <a href="#ebk-abo" class="ebk__promo ebk__promo--b"><span class="ebk__promo-k">Abonnement</span><span class="ebk__promo-h">Elke 2, 3 of 4 weken vers in de brievenbus</span><span class="ebk__promo-p">10% korting, altijd opzegbaar</span></a>
  </div>
</div></div>

<div class="ebk__usp"><div class="ebk__wrap ebk__usp-in">
  <span><svg viewBox="0 0 24 24"><path d="M12 3c3 4 5 6.5 5 10a5 5 0 01-10 0c0-2 1-3.5 2-4.5.3 1.6 1 2.5 2 3 0-3 .5-5.5 1-8.5z"/></svg><b>Max. 4 dagen</b> tussen branden en verzenden</span>
  <span><svg viewBox="0 0 24 24"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg><b>Brievenbuspakje</b> gratis vanaf € 35</span>
  <span><svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.4-5.7M4 4v4h4"/></svg><b>Niet lekker?</b> We sturen gratis een andere</span>
  <span><svg viewBox="0 0 24 24"><path d="M12 3.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z"/></svg><b>4,8 / 5</b> uit 2.316 reviews</span>
</div></div>

<div class="ebk__sec" id="ebk-shop"><div class="ebk__wrap">
  <div class="ebk__shop-head">
    <div><p class="ebk__kick">Assortiment · 8 koffies op voorraad</p><h2 class="ebk__h2">Koffiebonen, vers gebrand in Groningen</h2></div>
    <div class="ebk__tools">
      <button type="button" class="ebk__ftoggle" aria-expanded="false"><svg viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg>Filters</button>
      <span class="ebk__count" aria-live="polite"><b>8</b> resultaten</span>
      <label class="ebk__sort"><span>Sorteer</span><select class="ebk__sel"><option value="pop">Populair</option><option value="asc">Prijs laag naar hoog</option><option value="desc">Prijs hoog naar laag</option><option value="roast">Licht naar donker</option></select></label>
    </div>
  </div>
  <div class="ebk__shop">
    <div class="ebk__filters" aria-label="Filters">
      <fieldset class="ebk__fg"><legend>Branding</legend>
        <label><input type="checkbox" data-g="roast" value="licht">Licht <span class="ebk__sw" style="--c:#b07a45"></span></label>
        <label><input type="checkbox" data-g="roast" value="medium">Medium <span class="ebk__sw" style="--c:#7a4a26"></span></label>
        <label><input type="checkbox" data-g="roast" value="donker">Donker <span class="ebk__sw" style="--c:#3b2214"></span></label>
      </fieldset>
      <fieldset class="ebk__fg"><legend>Zetmethode</legend>
        <label><input type="checkbox" data-g="method" value="filter">Filter en pour-over</label>
        <label><input type="checkbox" data-g="method" value="espresso">Espresso en volautomaat</label>
        <label><input type="checkbox" data-g="method" value="french">French press</label>
      </fieldset>
      <fieldset class="ebk__fg"><legend>Soort</legend>
        <label><input type="checkbox" data-g="type" value="single">Single origin</label>
        <label><input type="checkbox" data-g="type" value="blend">Blend</label>
        <label><input type="checkbox" data-g="type" value="decaf">Cafeïnevrij</label>
      </fieldset>
      <button type="button" class="ebk__reset">Wis filters</button>
      <p class="ebk__fnote">Twijfel? Bel Sjoerd in de branderij, <a href="#">050 123 8814</a>, ma tot vr 9:00 tot 17:00.</p>
    </div>
    <div class="ebk__grid">
      <article class="ebk__p" data-roast="licht" data-r="1" data-method="filter" data-type="single" data-price="16.50" data-pop="1"><div class="ebk__p-img"><span class="ebk__badge">Nieuw</span><span class="ebk__bag" style="--l:#e7a7a0"><i>Huila</i><small>Colombia</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Huila Pink Bourbon</h3><p class="ebk__p-n">Framboos · rozenbottel · panela</p><div class="ebk__p-f"><span class="ebk__roast" data-v="1"></span><span class="ebk__price">€ 16,50 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Huila Pink Bourbon">In mand</button></div></article>
      <article class="ebk__p" data-roast="medium" data-r="3" data-method="filter espresso french" data-type="blend" data-price="11.95" data-pop="2"><div class="ebk__p-img"><span class="ebk__badge ebk__badge--d">Bestseller</span><span class="ebk__bag" style="--l:#d9b65c"><i>Martini</i><small>Huisblend</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Martiniblend</h3><p class="ebk__p-n">Melkchocolade · hazelnoot</p><div class="ebk__p-f"><span class="ebk__roast" data-v="3"></span><span class="ebk__price">€ 11,95 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Martiniblend">In mand</button></div></article>
      <article class="ebk__p" data-roast="licht" data-r="1" data-method="filter" data-type="single" data-price="14.95" data-pop="3"><div class="ebk__p-img"><span class="ebk__bag" style="--l:#b9cfa4"><i>Kochere</i><small>Ethiopië</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Yirgacheffe Kochere</h3><p class="ebk__p-n">Jasmijn · bergamot · perzik</p><div class="ebk__p-f"><span class="ebk__roast" data-v="1"></span><span class="ebk__price">€ 14,95 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Yirgacheffe Kochere">In mand</button></div></article>
      <article class="ebk__p" data-roast="donker" data-r="4" data-method="espresso" data-type="blend" data-price="12.95" data-pop="4"><div class="ebk__p-img"><span class="ebk__bag" style="--l:#2f2a26;--t:#f3e9d8"><i>Espresso</i><small>Ebbinge blend</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Ebbinge Espresso</h3><p class="ebk__p-n">Pure chocolade · dadel · zoethout</p><div class="ebk__p-f"><span class="ebk__roast" data-v="4"></span><span class="ebk__price">€ 12,95 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Ebbinge Espresso">In mand</button></div></article>
      <article class="ebk__p" data-roast="medium" data-r="3" data-method="espresso french" data-type="single" data-price="12.50" data-pop="5"><div class="ebk__p-img"><span class="ebk__bag" style="--l:#e4c49a"><i>Cerrado</i><small>Brazilië</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Cerrado Mineiro</h3><p class="ebk__p-n">Cacao · pinda · rietsuiker</p><div class="ebk__p-f"><span class="ebk__roast" data-v="3"></span><span class="ebk__price">€ 12,50 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Cerrado Mineiro">In mand</button></div></article>
      <article class="ebk__p" data-roast="medium" data-r="3" data-method="filter espresso french" data-type="decaf" data-price="13.95" data-pop="6"><div class="ebk__p-img"><span class="ebk__bag" style="--l:#f1ece2"><i>Decaf</i><small>Colombia</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Cafeïnevrij Sugarcane</h3><p class="ebk__p-n">Melasse · sinaasappel · cacao</p><div class="ebk__p-f"><span class="ebk__roast" data-v="3"></span><span class="ebk__price">€ 13,95 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Cafeïnevrij Sugarcane">In mand</button></div></article>
      <article class="ebk__p" data-roast="licht" data-r="1" data-method="filter" data-type="single" data-price="17.95" data-pop="7"><div class="ebk__p-img"><span class="ebk__badge ebk__badge--l">Nog 14 zakken</span><span class="ebk__bag" style="--l:#c98f6b"><i>Kiambu</i><small>Kenia</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Kenia Kiambu AA</h3><p class="ebk__p-n">Zwarte bes · tomaat · grapefruit</p><div class="ebk__p-f"><span class="ebk__roast" data-v="1"></span><span class="ebk__price">€ 17,95 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Kenia Kiambu AA">In mand</button></div></article>
      <article class="ebk__p" data-roast="donker" data-r="5" data-method="french espresso" data-type="blend" data-price="11.50" data-pop="8"><div class="ebk__p-img"><span class="ebk__badge ebk__badge--d">Seizoen</span><span class="ebk__bag" style="--l:#7c3b2c;--t:#f3e9d8"><i>Hunze</i><small>Winterblend</small></span></div><div class="ebk__p-b"><h3 class="ebk__p-h">Hunze winterblend</h3><p class="ebk__p-n">Speculaas · stroop · walnoot</p><div class="ebk__p-f"><span class="ebk__roast" data-v="5"></span><span class="ebk__price">€ 11,50 <small>250 g</small></span></div><button class="ebk__add" type="button" data-name="Hunze winterblend">In mand</button></div></article>
      <div class="ebk__empty" hidden><b>Geen koffie met deze combinatie.</b><span>Haal een filter weg, of mail ons: we branden soms kleine partijen op verzoek.</span><button type="button" class="ebk__reset">Wis filters</button></div>
    </div>
  </div>
</div></div>

<div class="ebk__sec ebk__pdp-sec" id="ebk-pdp"><div class="ebk__wrap ebk__pdp">
  <div class="ebk__gal">
    <div class="ebk__gal-main"><span class="ebk__bag ebk__bag--xl" style="--l:#e7a7a0"><i>Huila</i><small>Pink Bourbon · Colombia</small><em>Batch 0417 · gebrand 6 okt 2026 · 250 g</em></span><img src="https://neddev.com/lab-media/site-webshop-4.webp" alt="Verse bonen uit de koelbak" hidden></div>
    <div class="ebk__gal-th">
      <button type="button" class="is-on" data-src="" aria-label="Foto 1, de zak"><span class="ebk__bag ebk__bag--th" style="--l:#e7a7a0"></span></button>
      <button type="button" data-src="https://neddev.com/lab-media/site-webshop-4.webp" aria-label="Foto 2, verse bonen"><img src="https://neddev.com/lab-media/site-webshop-4.webp" alt=""></button>
      <button type="button" data-src="https://neddev.com/lab-media/site-webshop-3.webp" aria-label="Foto 3, zetten met een dripper"><img src="https://neddev.com/lab-media/site-webshop-3.webp" alt=""></button>
    </div>
  </div>
  <div class="ebk__buy">
    <p class="ebk__kick">Uitgelicht · single origin</p>
    <h2 class="ebk__h2 ebk__buy-h">Huila Pink Bourbon</h2>
    <p class="ebk__rate"><span class="ebk__stars" style="--v:96%"></span> 4,8 · <a href="#ebk-rev">87 reviews</a></p>
    <p class="ebk__buy-txt">Van Finca El Mirador, familie Bermeo, op 1.750 meter. Gewassen, 36 uur gefermenteerd. In de kop helder en zoet, met framboos en een afdronk van panela. Wij branden hem licht, voor filter en V60.</p>
    <div class="ebk__opt"><span class="ebk__opt-l">Inhoud</span><div class="ebk__chips" role="radiogroup">
      <button type="button" class="ebk__chip is-on" data-p="16.50">250 g</button><button type="button" class="ebk__chip" data-p="30.95">500 g</button><button type="button" class="ebk__chip" data-p="57.50">1 kg</button>
    </div></div>
    <div class="ebk__opt"><span class="ebk__opt-l">Maling</span><select class="ebk__sel ebk__grind"><option>Hele bonen</option><option>Filter (grof middel)</option><option>Espresso (fijn)</option><option>French press (grof)</option></select></div>
    <div class="ebk__buyrow">
      <div class="ebk__qty"><button type="button" data-q="-1" aria-label="Minder">-</button><input type="text" value="1" aria-label="Aantal" inputmode="numeric"><button type="button" data-q="1" aria-label="Meer">+</button></div>
      <button type="button" class="ebk__btn ebk__buy-add" data-name="Huila Pink Bourbon">In winkelmand · <span class="ebk__buy-p">€ 16,50</span></button>
    </div>
    <p class="ebk__ship"><svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>Op voorraad. Wordt donderdag 9 oktober gebrand, vrijdag bij je bezorgd.</p>
    <div class="ebk__prof">
      <div><span>Zuurgraad</span><i style="--w:80%"></i></div>
      <div><span>Zoetheid</span><i style="--w:70%"></i></div>
      <div><span>Body</span><i style="--w:35%"></i></div>
    </div>
    <dl class="ebk__spec">
      <div><dt>Herkomst</dt><dd>Pitalito, Huila, Colombia</dd></div>
      <div><dt>Variëteit</dt><dd>Pink Bourbon</dd></div>
      <div><dt>Proces</dt><dd>Gewassen, 36 uur fermentatie</dd></div>
      <div><dt>Hoogte</dt><dd>1.750 meter</dd></div>
      <div><dt>Inkoopprijs</dt><dd>€ 9,80 per kilo groen, 2,4 keer de beursprijs</dd></div>
    </dl>
  </div>
</div></div>

<div class="ebk__abo" id="ebk-abo"><div class="ebk__wrap ebk__abo-in">
  <div class="ebk__abo-txt">
    <p class="ebk__kick ebk__kick--l">Abonnement</p>
    <h2 class="ebk__h2">Nooit meer zonder bonen</h2>
    <p>Kies je koffie, hoeveel je drinkt en hoe vaak. Je betaalt per levering, met 10% korting en altijd gratis verzending. Pauzeren, wisselen of stoppen doe je zelf in je account, zonder opzegtermijn.</p>
    <ul class="ebk__ticks"><li>Elke levering gebrand in de week van verzending</li><li>Wisselend: elke keer een andere single origin</li><li>1.140 mensen in Groningen en daarbuiten gingen je voor</li></ul>
  </div>
  <div class="ebk__calc">
    <div class="ebk__cg"><span class="ebk__cg-l">1 · Koffie</span><div class="ebk__seg" data-k="c">
      <button type="button" class="is-on" data-v="13.95">Wisselend filter</button><button type="button" data-v="12.95">Espresso</button><button type="button" data-v="13.95">Cafeïnevrij</button></div></div>
    <div class="ebk__cg"><span class="ebk__cg-l">2 · Hoeveelheid</span><div class="ebk__seg" data-k="a">
      <button type="button" data-v="1">250 g</button><button type="button" class="is-on" data-v="1.875">500 g</button><button type="button" data-v="3.5">1 kg</button></div></div>
    <div class="ebk__cg"><span class="ebk__cg-l">3 · Hoe vaak</span><div class="ebk__seg" data-k="f">
      <button type="button" data-v="2">Elke 2 weken</button><button type="button" class="is-on" data-v="3">Elke 3 weken</button><button type="button" data-v="4">Elke 4 weken</button></div></div>
    <div class="ebk__calc-out">
      <div><span>Per levering</span><b class="ebk__o-l">€ 23,54</b><s class="ebk__o-o">€ 26,16</s></div>
      <div><span>Per maand, ongeveer</span><b class="ebk__o-m">€ 34,10</b></div>
      <div><span>Kopjes per dag</span><b class="ebk__o-c">2,9</b></div>
    </div>
    <button type="button" class="ebk__btn ebk__btn--copper">Start abonnement</button>
  </div>
</div></div>

<div class="ebk__sec" id="ebk-brand"><div class="ebk__wrap">
  <div class="ebk__brand-head"><div><p class="ebk__kick">De branderij · Boterdiep 52</p><h2 class="ebk__h2">Zo branden we, twee keer per week</h2></div><p class="ebk__brand-intro">Op een Probat uit 1964 van 15 kilo. Elke batch krijgt een nummer en een gelogde curve; die vind je terug op de zak.</p></div>
  <div class="ebk__brand">
    <div class="ebk__curve">
      <svg viewBox="0 0 640 300" role="img" aria-label="Brandcurve van batch 0417: temperatuur van de bonen over 11 minuten">
        <g class="ebk__cv-grid"><path d="M50 40H620M50 100H620M50 160H620M50 220H620"/></g>
        <g class="ebk__cv-ax"><text x="40" y="44">220°</text><text x="40" y="104">180°</text><text x="40" y="164">140°</text><text x="40" y="224">100°</text>
        <text x="50" y="282">0</text><text x="153" y="282">2</text><text x="257" y="282">4</text><text x="361" y="282">6</text><text x="465" y="282">8</text><text x="569" y="282">10 min</text></g>
        <rect class="ebk__ph ebk__ph--1" x="50" y="30" width="220" height="230"/><rect class="ebk__ph ebk__ph--2" x="270" y="30" width="220" height="230"/><rect class="ebk__ph ebk__ph--3" x="490" y="30" width="130" height="230"/>
        <path class="ebk__cv-line" d="M50 70 C70 200,95 236,130 228 C190 210,240 170,290 140 C350 108,420 86,470 70 C520 56,570 48,615 44"/>
        <circle class="ebk__cv-dot" cx="490" cy="64" r="6"/><text class="ebk__cv-lab" x="500" y="88">first crack 9:10</text>
        <text class="ebk__ph-t" x="60" y="252">Drogen</text><text class="ebk__ph-t" x="280" y="252">Maillard</text><text class="ebk__ph-t" x="500" y="252">Ontwikkeling</text>
      </svg>
      <p class="ebk__cv-cap">Batch 0417 · Huila Pink Bourbon · 12 kg groen, 10,3 kg gebrand · eindtemperatuur 207°</p>
    </div>
    <ol class="ebk__steps">
      <li><b>01</b><span><strong>Groene koffie proeven</strong>We cuppen elk monster voor we kopen. Van de 60 monsters per jaar kopen we er zo'n 14.</span></li>
      <li><b>02</b><span><strong>Profiel per boon</strong>Een Keniaanse boon wil een andere curve dan een Braziliaanse. Elk profiel testen we in drie proefbranden.</span></li>
      <li><b>03</b><span><strong>Branden en loggen</strong>Maandag en donderdag, tussen 7:00 en 12:00. Elke batch wordt gelogd en geproefd voor hij in de zak gaat.</span></li>
      <li><b>04</b><span><strong>Rusten en verzenden</strong>Een dag ontgassen, dan vacuüm-vrij verpakt met ventiel en dezelfde middag mee met de bezorger.</span></li>
    </ol>
  </div>
</div></div>

<div class="ebk__sec ebk__del"><div class="ebk__wrap ebk__del-in">
  <div>
    <p class="ebk__kick">Bezorging en retour</p>
    <h2 class="ebk__h2">Wat het kost en wanneer het komt</h2>
    <table class="ebk__tbl">
      <thead><tr><th>Verzendwijze</th><th>Levertijd</th><th class="ebk__r">Kosten</th></tr></thead>
      <tbody>
        <tr><td><b>Brievenbuspakje</b><small>tot 1 kg, past door de bus</small></td><td>1 werkdag</td><td class="ebk__r">€ 3,95<small>gratis vanaf € 35</small></td></tr>
        <tr><td><b>Pakket met track and trace</b><small>vanaf 1 kg of met zetmateriaal</small></td><td>1 tot 2 werkdagen</td><td class="ebk__r">€ 5,95<small>gratis vanaf € 60</small></td></tr>
        <tr><td><b>Ophalen in de branderij</b><small>Boterdiep 52, ma tot za</small></td><td>dezelfde dag</td><td class="ebk__r">gratis</td></tr>
        <tr><td><b>België en Duitsland</b><small>pakket</small></td><td>2 tot 4 werkdagen</td><td class="ebk__r">€ 7,95<small>gratis vanaf € 75</small></td></tr>
      </tbody>
    </table>
  </div>
  <div class="ebk__ret">
    <h3 class="ebk__h3">Retourneren</h3>
    <p>Ongeopende zakken en zetmateriaal mag je binnen 30 dagen terugsturen. Je krijgt je geld binnen 5 werkdagen terug.</p>
    <h3 class="ebk__h3">Valt een koffie tegen?</h3>
    <p>Laat het ons weten. We sturen gratis een zak van een andere koffie, en vragen alleen hoe je hem zette.</p>
    <p class="ebk__pay"><span>iDEAL</span><span>Bancontact</span><span>Creditcard</span><span>PayPal</span><span>Achteraf betalen</span></p>
  </div>
</div></div>

<div class="ebk__sec ebk__rev" id="ebk-rev"><div class="ebk__wrap ebk__rev-in">
  <div class="ebk__score">
    <p class="ebk__kick">Reviews</p>
    <p class="ebk__score-n">4,8<small>/5</small></p>
    <span class="ebk__stars ebk__stars--lg" style="--v:96%"></span>
    <p class="ebk__score-s">2.316 reviews van geverifieerde kopers</p>
    <div class="ebk__bars">
      <div><span>5</span><i style="--w:84%"></i><em>1.946</em></div>
      <div><span>4</span><i style="--w:12%"></i><em>278</em></div>
      <div><span>3</span><i style="--w:3%"></i><em>62</em></div>
      <div><span>2</span><i style="--w:1%"></i><em>19</em></div>
      <div><span>1</span><i style="--w:.5%"></i><em>11</em></div>
    </div>
  </div>
  <div class="ebk__revs">
    <figure class="ebk__r1"><span class="ebk__stars" style="--v:100%"></span><blockquote>Het abonnement loopt nu anderhalf jaar. Eén keer was een zak te lang onderweg door PostNL; zonder dat ik iets vroeg kreeg ik een nieuwe.</blockquote><figcaption><b>Hilde Bosma</b>, Haren · Abonnement wisselend filter · 2 okt 2026</figcaption></figure>
    <figure class="ebk__r1"><span class="ebk__stars" style="--v:100%"></span><blockquote>De Martiniblend in onze volautomaat op kantoor. Collega's klagen niet meer over de koffie, dat zegt genoeg.</blockquote><figcaption><b>Dennis Wieringa</b>, Groningen · Martiniblend 1 kg · 24 sep 2026</figcaption></figure>
    <figure class="ebk__r1"><span class="ebk__stars" style="--v:80%"></span><blockquote>Kochere is prachtig als filter. Voor espresso vond ik hem te zuur, maar dat stond ook op de site. Fijn advies via de mail.</blockquote><figcaption><b>Yusuf Demir</b>, Leeuwarden · Yirgacheffe Kochere · 11 sep 2026</figcaption></figure>
  </div>
</div></div>

<div class="ebk__sec ebk__news"><div class="ebk__wrap">
  <div class="ebk__news-head"><h2 class="ebk__h2">Uit de branderij</h2><a href="#" class="ebk__more">Alle berichten</a></div>
  <div class="ebk__news-l">
    <a href="#" class="ebk__n"><img src="https://neddev.com/lab-media/site-webshop-3.webp" alt=""><time datetime="2026-10-03">3 oktober 2026</time><span>V60 in vier stappen: de verhouding die wij thuis gebruiken</span></a>
    <a href="#" class="ebk__n"><time datetime="2026-09-19">19 september 2026</time><span>Waarom onze Keniaanse koffie dit jaar € 2 duurder is</span><p>De oogst in Kiambu viel 30% lager uit. We betalen de boeren hetzelfde per kilo als vorig jaar.</p><em>Transparantie</em></a>
    <a href="#" class="ebk__n"><time datetime="2026-09-02">2 september 2026</time><span>Cuppingavond in de branderij op 23 oktober, 12 plaatsen</span><p>Zes koffies blind proeven met Sjoerd, van 19:30 tot 21:30. Deelname € 17,50.</p><em>Agenda</em></a>
    <a href="#" class="ebk__n"><time datetime="2026-08-14">14 augustus 2026</time><span>Nieuwe composteerbare zakken met ventiel, getest in drie maanden</span><p>Ze houden de koffie even lang vers als de oude zak en mogen bij het gft.</p><em>Verpakking</em></a>
  </div>
</div></div>

<div class="ebk__sec ebk__faq"><div class="ebk__wrap ebk__faq-in">
  <h2 class="ebk__h2">Veelgestelde vragen</h2>
  <div>
    <details class="ebk__q" open><summary>Hoe lang blijft koffie vers?</summary><p>Hele bonen zijn op hun best tussen dag 5 en dag 35 na branden. Gemalen koffie drink je binnen twee weken. De branddatum staat op elke zak.</p></details>
    <details class="ebk__q"><summary>Welke maling moet ik kiezen?</summary><p>Heb je een molen, kies dan hele bonen. Anders: fijn voor espresso en percolator, grof middel voor filter en V60, grof voor french press en cold brew.</p></details>
    <details class="ebk__q"><summary>Leveren jullie ook aan kantoren en horeca?</summary><p>Ja, vanaf 5 kilo per maand met staffelprijzen en bezorging op vaste dagen. Kijk bij Zakelijk of bel 050 123 8814.</p></details>
    <details class="ebk__q"><summary>Kan ik mijn abonnement pauzeren?</summary><p>Altijd, in je account. Een levering overslaan, de koffie wisselen of opzeggen kan tot de dag voor verzending.</p></details>
  </div>
</div></div>

<div class="ebk__foot" role="contentinfo"><div class="ebk__wrap">
  <div class="ebk__nl">
    <div><b>Eén mail per maand, als er een nieuwe koffie binnen is.</b><span>Plus 10% korting op je eerste bestelling.</span></div>
    <form class="ebk__nl-f" novalidate><input type="email" placeholder="jouw@voorbeeld.nl" aria-label="E-mailadres"><button type="submit" class="ebk__btn ebk__btn--copper">Aanmelden</button></form>
  </div>
  <div class="ebk__foot-cols">
    <div class="ebk__fc ebk__fc--b"><span class="ebk__logo ebk__logo--f"><svg viewBox="0 0 40 40" aria-hidden="true"><ellipse cx="20" cy="20" rx="11" ry="16" transform="rotate(28 20 20)"/><path d="M14 9c6 6 6 16 12 22"/></svg><span>Ebbinge<small>Koffiebranderij · Groningen</small></span></span><p>Boterdiep 52, 9712 LN Groningen<br>Winkel en branderij: ma tot vr 8:30 tot 17:30, za 9:00 tot 16:00</p></div>
    <div class="ebk__fc"><b>Winkel</b><a href="#">Koffiebonen</a><a href="#">Proefpakketten</a><a href="#">Zetmateriaal</a><a href="#">Cadeaubonnen</a></div>
    <div class="ebk__fc"><b>Klantenservice</b><a href="#">Bezorging</a><a href="#">Retourneren</a><a href="#">Abonnement beheren</a><a href="#">Contact</a></div>
    <div class="ebk__fc"><b>Branderij</b><a href="#">Over ons</a><a href="#">Inkoop en prijzen</a><a href="#">Zakelijk</a><a href="#">Workshops</a></div>
  </div>
  <div class="ebk__foot-bot"><span>Ebbinge Koffiebranderij V.O.F. · KvK 71234598 · btw NL859912345B01</span><span>Thuiswinkel Waarborg · Inkoopprijzen openbaar per koffie</span><span><a href="#">Privacy</a> · <a href="#">Voorwaarden</a> · <a href="#">Cookies</a></span></div>
</div></div>
</div>
</div>

/* Ebbinge Koffiebranderij · webshop, Groningen · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,700,800 + satoshi@400,500,700 */
.ebk{--bg:#faf7f2;--card:#f1ebe0;--ink:#1d1814;--mut:#6b6157;--line:#e2d9cb;--cop:#b4532a;--cop2:#93401d;--esp:#2a211b;--ok:#2f6b45;
container-type:inline-size;background:var(--bg);color:var(--ink);font:400 15.5px/1.55 Satoshi,sans-serif;-webkit-font-smoothing:antialiased}
.ebk *{box-sizing:border-box}
.ebk a{color:inherit;text-decoration:none}
.ebk a.ebk__hero-main,.ebk a.ebk__cart,.ebk a.ebk__promo--b{color:#fff}
.ebk a.ebk__promo--b{color:#f2efe6}
.ebk img{display:block;max-width:100%}
.ebk svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ebk__wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.ebk__ann{background:var(--esp);color:#eadfce;font-size:13px}
.ebk__ann-in{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.ebk__head{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:6}
.ebk__head-in{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding-top:16px;padding-bottom:14px}
.ebk__burger{display:none;background:none;border:0;width:40px;height:40px;padding:8px;cursor:pointer;color:var(--ink)}
.ebk__logo{display:flex;align-items:center;gap:10px}
.ebk__logo svg{width:34px;height:34px;color:var(--cop);stroke-width:2.2}
.ebk__logo>span{font:800 25px/1 'Cabinet Grotesk',sans-serif;letter-spacing:-.02em;display:flex;flex-direction:column}
.ebk__logo small{font:500 11px/1 Satoshi,sans-serif;letter-spacing:.06em;color:var(--mut);margin-top:4px}
.ebk__search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 18px;height:46px;max-width:560px;width:100%;justify-self:center;transition:border-color .2s}
.ebk__search:focus-within{border-color:var(--ink)}
.ebk__search svg{width:19px;height:19px;color:var(--mut);flex:none}
.ebk__search input{border:0;background:none;font:400 15px Satoshi,sans-serif;width:100%;outline:0;color:var(--ink)}
.ebk__acts{display:flex;gap:22px;align-items:center}
.ebk__act{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14.5px}
.ebk__act svg{width:22px;height:22px}
.ebk__act:hover{color:var(--cop)}
.ebk__cart{background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.ebk a.ebk__cart:hover{color:#fff;background:var(--cop)}
.ebk__cart-n{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--cop);font-size:11.5px;font-weight:700;padding:0 5px;margin-left:2px;transition:transform .25s}
.ebk__cart:hover .ebk__cart-n{background:var(--ink)}
.ebk__cart-n.is-pop{transform:scale(1.35)}
.ebk__cart-t{font-style:normal;font-variant-numeric:tabular-nums;font-size:13.5px;opacity:.75;border-left:1px solid rgba(255,255,255,.25);padding-left:10px}
.ebk__cats-in{display:flex;gap:30px;padding-top:0;padding-bottom:0;font-weight:500;font-size:14.5px;overflow-x:auto;scrollbar-width:none}
.ebk__cats-in::-webkit-scrollbar{display:none}
.ebk__cats a{padding:12px 0;border-bottom:2px solid transparent;white-space:nowrap}
.ebk__cats a:hover{color:var(--cop)}
.ebk__cats a.is-on{border-bottom-color:var(--cop)}
.ebk__toast{position:absolute;right:32px;top:100%;margin-top:10px;background:var(--esp);color:#fff;font-size:14px;padding:12px 16px;border-radius:6px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
.ebk__toast.is-on{opacity:1;transform:none}
.ebk__hero{padding:28px 0 0}
.ebk__hero-in{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.ebk__hero-main{position:relative;border-radius:8px;overflow:hidden;min-height:430px;display:block;color:#fff}
.ebk__hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ebk__hero-main:hover img{transform:scale(1.03)}
.ebk__hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,24,20,.82) 0%,rgba(29,24,20,.5) 42%,rgba(29,24,20,0) 70%)}
.ebk__hero-txt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:44px;max-width:470px;height:100%;justify-content:flex-end}
.ebk__pill{font-size:12.5px;font-weight:700;letter-spacing:.04em;background:var(--cop);padding:6px 11px;border-radius:999px}
.ebk__h1{font:800 46px/1.02 'Cabinet Grotesk',sans-serif;letter-spacing:-.02em}
.ebk__hero-sub{font-size:16.5px;color:#eadfce}
.ebk__hero-cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;border-bottom:1.5px solid #fff;padding-bottom:3px;margin-top:6px}
.ebk__hero-cta svg{width:18px;height:18px;transition:transform .2s}
.ebk__hero-main:hover .ebk__hero-cta svg{transform:translateX(4px)}
.ebk__hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.ebk__promo{border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;transition:transform .2s}
.ebk__promo:hover{transform:translateY(-2px)}
.ebk__promo--a{background:#e9dcc6}
.ebk__promo--b{background:var(--ok);color:#f2efe6}
.ebk__promo-k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.ebk__promo-h{font:700 23px/1.12 'Cabinet Grotesk',sans-serif;letter-spacing:-.01em}
.ebk__promo-p{font-weight:700;font-variant-numeric:tabular-nums}
.ebk__promo-p s{font-weight:400;opacity:.6;margin-right:6px}
.ebk__usp{border-bottom:1px solid var(--line)}
.ebk__usp-in{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;font-size:14px;color:var(--mut)}
.ebk__usp span{display:flex;align-items:center;gap:10px}
.ebk__usp b{color:var(--ink);font-weight:700}
.ebk__usp svg{width:22px;height:22px;color:var(--cop);flex:none}
.ebk__sec{padding:72px 0}
.ebk__kick{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cop);margin:0 0 10px}
.ebk__kick--l{color:#f0b48f}
.ebk__h2{font:800 38px/1.05 'Cabinet Grotesk',sans-serif;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.ebk__h3{font:700 19px/1.2 'Cabinet Grotesk',sans-serif;margin:0 0 6px}
.ebk__shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.ebk__shop-head .ebk__h2{margin:0}
.ebk__tools{display:flex;align-items:center;gap:20px}
.ebk__count{font-size:14px;color:var(--mut)}
.ebk__count b{color:var(--ink);font-variant-numeric:tabular-nums}
.ebk__sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.ebk__sel{font:500 14.5px Satoshi,sans-serif;padding:10px 34px 10px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.ebk__ftoggle{display:none;align-items:center;gap:8px;font:600 14.5px Satoshi,sans-serif;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 14px;cursor:pointer;color:var(--ink)}
.ebk__ftoggle svg{width:18px;height:18px}
.ebk__shop{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.ebk__filters{position:sticky;top:130px}
.ebk__fg{border:0;border-top:1px solid var(--ink);margin:0 0 22px;padding:14px 0 0}
.ebk__fg legend{font:700 13px Satoshi,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:0;float:left;width:100%;margin-bottom:10px}
.ebk__fg label{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px;cursor:pointer;clear:both}
.ebk__fg label:hover{color:var(--cop)}
.ebk__fg input{accent-color:var(--cop);width:17px;height:17px;margin:0}
.ebk__sw{width:14px;height:14px;border-radius:50%;background:var(--c);margin-left:auto}
.ebk__reset{background:none;border:0;padding:0;font:600 14px Satoshi,sans-serif;color:var(--cop);border-bottom:1px solid currentColor;cursor:pointer}
.ebk__fnote{font-size:13px;color:var(--mut);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.ebk__fnote a{color:var(--ink);font-weight:600}
.ebk__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px}
.ebk__p{display:flex;flex-direction:column}
.ebk__p[hidden]{display:none}
.ebk__p-img{position:relative;background:var(--card);border-radius:8px;aspect-ratio:1/1.02;display:grid;place-items:center;overflow:hidden}
.ebk__badge{position:absolute;left:12px;top:12px;font-size:11.5px;font-weight:700;letter-spacing:.03em;background:var(--ink);color:#fff;padding:4px 9px;border-radius:999px;z-index:1}
.ebk__badge--d{background:var(--cop)}
.ebk__badge--l{background:#fff;color:var(--cop);border:1px solid var(--cop)}
.ebk__bag[hidden]{display:none}
.ebk__bag{position:relative;width:46%;aspect-ratio:.72;background:linear-gradient(90deg,#c9ab7f 0%,#d9bf96 22%,#d4b88d 70%,#bf9f72 100%);border-radius:3px 3px 6px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 22px 26px -18px rgba(42,33,27,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ebk__bag::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;background:repeating-linear-gradient(90deg,#b8996c 0 3px,#cdb084 3px 6px);border-radius:3px 3px 0 0}
.ebk__bag::after{content:"";position:absolute;left:14%;right:14%;top:30%;bottom:16%;background:var(--l);border-radius:2px;z-index:0}
.ebk__bag i,.ebk__bag small{position:relative;z-index:1;color:var(--t,#2a211b);font-style:normal}
.ebk__bag i{font:800 clamp(13px,1.3cqi,17px)/1 'Cabinet Grotesk',sans-serif;letter-spacing:-.01em;margin-top:22%}
.ebk__bag small{font-size:clamp(8px,.8cqi,10px);letter-spacing:.05em;padding:0 17%;text-align:center;line-height:1.25;text-transform:uppercase;font-weight:700;opacity:.8}
.ebk__p:hover .ebk__bag{transform:translateY(-6px) rotate(-2deg)}
.ebk__p-b{padding:14px 2px 0;display:flex;flex-direction:column;gap:4px;flex:1}
.ebk__p-h{font:700 18px/1.2 'Cabinet Grotesk',sans-serif;margin:0}
.ebk__p-n{font-size:13.5px;color:var(--mut);margin:0}
.ebk__p-f{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px;gap:8px}
.ebk__price{font-weight:700;font-variant-numeric:tabular-nums}
.ebk__price small{font-weight:400;color:var(--mut);font-size:12.5px;margin-left:3px}
.ebk__roast{display:flex;gap:3px}
.ebk__roast::before{content:"";width:50px;height:8px;border-radius:4px;background:linear-gradient(90deg,#b07a45,#7a4a26 50%,#3b2214);-webkit-mask:linear-gradient(#000 0 0);opacity:.95}
.ebk__roast{position:relative}
.ebk__roast::after{content:"";position:absolute;top:-3px;width:3px;height:14px;background:var(--ink);border-radius:2px;left:calc(var(--x,0) * 1%)}
.ebk__roast[data-v="1"]{--x:8}.ebk__roast[data-v="2"]{--x:30}.ebk__roast[data-v="3"]{--x:50}.ebk__roast[data-v="4"]{--x:76}.ebk__roast[data-v="5"]{--x:92}
.ebk__add{margin-top:auto;font:700 14.5px Satoshi,sans-serif;padding:11px;border:1.5px solid var(--ink);border-radius:6px;background:none;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.ebk__add:hover{background:var(--ink);color:#fff}
.ebk__add.is-done{background:var(--ok);border-color:var(--ok);color:#fff}
.ebk__empty{grid-column:1/-1;border:1px dashed var(--mut);border-radius:8px;padding:40px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ebk__empty[hidden]{display:none}
.ebk__pdp-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ebk__pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.ebk__gal-main{border-radius:8px;overflow:hidden;background:var(--card)}
.ebk__gal-main{aspect-ratio:1/.9;display:grid;place-items:center;position:relative}
.ebk__gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ebk__gal-main img[hidden]{display:none}
.ebk__bag--xl{width:38%}
.ebk__bag--xl i{font-size:clamp(20px,2.6cqi,34px)}
.ebk__bag--xl small{font-size:clamp(8px,.85cqi,11px);text-align:center;padding:0 18%}
.ebk__bag--xl em{position:relative;z-index:1;font-style:normal;font-size:clamp(7px,.7cqi,9.5px);color:#2a211b;opacity:.7;margin-top:8px;text-align:center;padding:0 18%;line-height:1.3}
.ebk__gal-th button{background:var(--card)!important;display:grid;place-items:center;aspect-ratio:1}
.ebk__bag--th{width:42%;box-shadow:none}
.ebk__gal-th{display:grid;grid-template-columns:repeat(3,96px);gap:10px;margin-top:10px}
.ebk__gal-th button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:none}
.ebk__gal-th button.is-on{border-color:var(--ink)}
.ebk__gal-th img{width:100%;aspect-ratio:1;object-fit:cover}
.ebk__buy-h{font-size:44px}
.ebk__rate{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 16px}
.ebk__rate a{border-bottom:1px solid currentColor}
.ebk__stars{display:inline-block;width:84px;height:15px;background:linear-gradient(90deg,var(--cop) var(--v),#d8cdbd var(--v));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 15'%3E%3Cg%3E%3Cpath id='s' d='M7.5 0l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4L3 13.8l.9-5L.3 5.3l5-.7z'/%3E%3Cuse href='%23s' x='17'/%3E%3Cuse href='%23s' x='34'/%3E%3Cuse href='%23s' x='51'/%3E%3Cuse href='%23s' x='68'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 15'%3E%3Cg%3E%3Cpath id='s' d='M7.5 0l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4L3 13.8l.9-5L.3 5.3l5-.7z'/%3E%3Cuse href='%23s' x='17'/%3E%3Cuse href='%23s' x='34'/%3E%3Cuse href='%23s' x='51'/%3E%3Cuse href='%23s' x='68'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%}
.ebk__stars--lg{width:140px;height:25px}
.ebk__buy-txt{color:#3d352e;margin:0 0 22px}
.ebk__opt{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:14px;margin-bottom:14px}
.ebk__opt-l{font-size:13.5px;font-weight:700}
.ebk__chips{display:flex;gap:8px;flex-wrap:wrap}
.ebk__chip{font:600 14.5px Satoshi,sans-serif;padding:10px 18px;border:1.5px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;color:var(--ink)}
.ebk__chip:hover{border-color:var(--mut)}
.ebk__chip.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.ebk__grind{width:100%;max-width:280px}
.ebk__buyrow{display:flex;gap:12px;margin:22px 0 14px}
.ebk__qty{display:flex;border:1.5px solid var(--line);border-radius:6px;background:#fff}
.ebk__qty button{width:42px;border:0;background:none;font:500 20px Satoshi,sans-serif;cursor:pointer;color:var(--ink)}
.ebk__qty button:hover{color:var(--cop)}
.ebk__qty input{width:38px;border:0;text-align:center;font:700 16px Satoshi,sans-serif;font-variant-numeric:tabular-nums;background:none;color:var(--ink)}
.ebk__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 15.5px Satoshi,sans-serif;padding:15px 26px;border:0;border-radius:6px;background:var(--ink);color:#fff;cursor:pointer;transition:background .2s;font-variant-numeric:tabular-nums}
.ebk__btn:hover{background:var(--cop)}
.ebk__btn--copper{background:var(--cop)}
.ebk__btn--copper:hover{background:var(--cop2)}
.ebk__buy-add{flex:1}
.ebk__ship{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ok);margin:0 0 26px;font-weight:500}
.ebk__ship svg{width:18px;height:18px;flex:none;margin-top:2px;stroke-width:2.2}
.ebk__prof{display:grid;gap:9px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ebk__prof div{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:14px;font-size:13.5px}
.ebk__prof i{height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.ebk__prof i::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--cop);border-radius:3px}
.ebk__spec{margin:0;font-size:14px}
.ebk__spec div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.ebk__spec dt{color:var(--mut)}
.ebk__spec dd{margin:0}
.ebk__abo{background:var(--esp);color:#eadfce;padding:72px 0}
.ebk__abo-in{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.ebk__abo .ebk__h2{color:#fff;font-size:46px}
.ebk__abo-txt>p{max-width:30em}
.ebk__ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.ebk__ticks li{display:flex;gap:10px;align-items:flex-start}
.ebk__ticks li::before{content:"";width:14px;height:8px;border-left:2px solid #f0b48f;border-bottom:2px solid #f0b48f;transform:rotate(-45deg);margin-top:5px;flex:none}
.ebk__calc{background:var(--bg);color:var(--ink);border-radius:10px;padding:30px;display:grid;gap:20px}
.ebk__cg-l{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ebk__seg{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.ebk__seg button{font:600 14px Satoshi,sans-serif;padding:12px 6px;border:0;background:none;cursor:pointer;color:var(--ink)}
.ebk__seg button+button{border-left:1.5px solid var(--ink)}
.ebk__seg button:hover{background:var(--card)}
.ebk__seg button.is-on{background:var(--ink);color:#fff}
.ebk__calc-out{display:grid;grid-template-columns:1.2fr 1fr .8fr;border-top:1px solid var(--line);padding-top:18px}
.ebk__calc-out div{display:flex;flex-direction:column;gap:2px}
.ebk__calc-out div+div{border-left:1px solid var(--line);padding-left:16px}
.ebk__calc-out span{font-size:12.5px;color:var(--mut)}
.ebk__calc-out b{font:800 28px/1.1 'Cabinet Grotesk',sans-serif;font-variant-numeric:tabular-nums}
.ebk__calc-out s{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.ebk__brand-head{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;margin-bottom:34px}
.ebk__brand-head .ebk__h2{margin:0}
.ebk__brand-intro{margin:0;color:var(--mut)}
.ebk__brand{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start}
.ebk__curve{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 20px 14px}
.ebk__curve svg{width:100%;height:auto;display:block}
.ebk__cv-grid path{stroke:#ece5d9;stroke-width:1}
.ebk__cv-ax text{fill:var(--mut);stroke:none;font:500 11px Satoshi,sans-serif;text-anchor:end}
.ebk__cv-ax text:nth-child(n+5){text-anchor:start}
.ebk__ph{stroke:none}
.ebk__ph--1{fill:rgba(176,122,69,.07)}.ebk__ph--2{fill:rgba(122,74,38,.1)}.ebk__ph--3{fill:rgba(59,34,20,.12)}
.ebk__ph-t{fill:var(--mut);stroke:none;font:700 11px Satoshi,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ebk__cv-line{stroke:var(--cop);stroke-width:3;stroke-dasharray:900;stroke-dashoffset:0}
.ebk__cv-dot{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.ebk__cv-lab{fill:var(--ink);stroke:none;font:700 12px Satoshi,sans-serif}
.ebk__cv-cap{font-size:12.5px;color:var(--mut);margin:10px 0 0;font-variant-numeric:tabular-nums}
.ebk__steps{list-style:none;margin:0;padding:0}
.ebk__steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.ebk__steps li:first-child{border-top-color:var(--ink);padding-top:0;border-top:0}
.ebk__steps b{font:800 15px 'Cabinet Grotesk',sans-serif;color:var(--cop);font-variant-numeric:tabular-nums}
.ebk__steps span{font-size:14.5px;color:#4a4038}
.ebk__steps strong{display:block;color:var(--ink);font:700 17px/1.3 'Cabinet Grotesk',sans-serif;margin-bottom:3px}
.ebk__del{background:var(--card)}
.ebk__del-in{display:grid;grid-template-columns:1.5fr 1fr;gap:56px}
.ebk__tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--bg);border-radius:8px;overflow:hidden}
.ebk__tbl th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.ebk__tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ebk__tbl tr:last-child td{border-bottom:0}
.ebk__tbl td b{display:block;font-weight:700}
.ebk__tbl td small{display:block;font-size:12.5px;color:var(--mut)}
.ebk__r{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.ebk__ret{padding-top:48px}
.ebk__ret p{margin:0 0 22px;color:#4a4038;font-size:14.5px}
.ebk__pay{display:flex;flex-wrap:wrap;gap:6px}
.ebk__pay span{font-size:12px;font-weight:700;border:1px solid #cbbfad;border-radius:4px;padding:5px 9px;background:var(--bg)}
.ebk__rev-in{display:grid;grid-template-columns:300px 1fr;gap:64px}
.ebk__score-n{font:800 76px/1 'Cabinet Grotesk',sans-serif;margin:0 0 8px;letter-spacing:-.03em}
.ebk__score-n small{font-size:26px;color:var(--mut);font-weight:700}
.ebk__score-s{font-size:13.5px;color:var(--mut);margin:8px 0 18px}
.ebk__bars{display:grid;gap:6px}
.ebk__bars div{display:grid;grid-template-columns:12px 1fr 44px;gap:10px;align-items:center;font-size:12.5px;font-variant-numeric:tabular-nums}
.ebk__bars i{height:6px;background:var(--line);border-radius:3px;position:relative;overflow:hidden}
.ebk__bars i::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--ink)}
.ebk__bars em{font-style:normal;color:var(--mut);text-align:right}
.ebk__revs{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ebk__r1{margin:0;padding:24px 28px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.ebk__r1:nth-child(-n+2){border-top:0;padding-top:0}
.ebk__r1:nth-child(3){grid-column:1/-1}
.ebk__r1 blockquote{margin:10px 0 12px;font-size:16.5px;line-height:1.5}
.ebk__r1 figcaption{font-size:12.5px;color:var(--mut)}
.ebk__r1 figcaption b{color:var(--ink)}
.ebk__news{border-top:1px solid var(--line);padding-top:56px;padding-bottom:56px}
.ebk__news-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.ebk__more{font-weight:700;font-size:14.5px;border-bottom:1.5px solid var(--cop)}
.ebk__news-l{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.ebk__n{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:2px solid var(--ink)}
.ebk__n img{border-radius:6px;aspect-ratio:16/10;object-fit:cover;margin-bottom:4px}
.ebk__n p{margin:0;font-size:14px;color:var(--mut)}
.ebk__n time{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.ebk__n span{font:700 18px/1.25 'Cabinet Grotesk',sans-serif}
.ebk__n em{font-style:normal;font-size:12px;font-weight:700;color:var(--cop);letter-spacing:.06em;text-transform:uppercase;margin-top:auto}
.ebk__n:hover span{color:var(--cop)}
.ebk__faq{background:#fff;border-top:1px solid var(--line)}
.ebk__faq-in{display:grid;grid-template-columns:1fr 2fr;gap:56px}
.ebk__q{border-bottom:1px solid var(--line)}
.ebk__q:first-child{border-top:1px solid var(--ink)}
.ebk__q summary{list-style:none;cursor:pointer;padding:17px 36px 17px 0;font-weight:700;font-size:16.5px;position:relative}
.ebk__q summary::-webkit-details-marker{display:none}
.ebk__q summary::before,.ebk__q summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:2px;background:var(--ink);transition:transform .2s}
.ebk__q summary::after{transform:rotate(90deg)}
.ebk__q[open] summary::after{transform:rotate(0)}
.ebk__q summary:hover{color:var(--cop)}
.ebk__q p{margin:0 0 18px;color:#4a4038;max-width:44em}
.ebk__foot{background:var(--esp);color:#bcae9c;padding:0 0 26px;font-size:14px}
.ebk__nl{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:36px 0;border-bottom:1px solid rgba(234,223,206,.15)}
.ebk__nl b{display:block;color:#fff;font:700 21px/1.25 'Cabinet Grotesk',sans-serif}
.ebk__nl-f{display:flex;gap:8px;flex:0 1 440px}
.ebk__nl-f input{flex:1;min-width:0;font:400 15px Satoshi,sans-serif;padding:14px 16px;border-radius:6px;border:1px solid rgba(234,223,206,.25);background:rgba(255,255,255,.06);color:#fff}
.ebk__foot-cols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px;padding:44px 0}
.ebk__fc{display:flex;flex-direction:column;gap:8px}
.ebk__fc b{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.ebk__fc a:hover{color:#fff}
.ebk__logo--f>span{color:#fff}
.ebk__logo--f small{color:#bcae9c}
.ebk__fc--b p{margin:14px 0 0;max-width:26em}
.ebk__foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#8e8170;border-top:1px solid rgba(234,223,206,.15);padding-top:22px}
@media (prefers-reduced-motion:reduce){.ebk *{transition:none!important}}
@container (max-width:1000px){
 .ebk__head-in{grid-template-columns:auto 1fr auto;gap:12px}
 .ebk__search{grid-column:1/-1;grid-row:2;max-width:none}
 .ebk__act:not(.ebk__cart){display:none}
 .ebk__hero-in,.ebk__pdp,.ebk__abo-in,.ebk__brand,.ebk__brand-head,.ebk__del-in,.ebk__rev-in,.ebk__faq-in{grid-template-columns:1fr;gap:32px}
 .ebk__hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
 .ebk__usp-in{grid-template-columns:1fr 1fr}
 .ebk__shop{grid-template-columns:1fr}
 .ebk__grid{grid-template-columns:repeat(3,1fr)}
 .ebk__ftoggle{display:inline-flex}
 .ebk__filters{display:none;position:static;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 18px 4px;grid-template-columns:repeat(3,1fr);gap:0 20px}
 .ebk__filters.is-open{display:grid}
 .ebk__fnote{grid-column:1/-1}
 .ebk__news-l{grid-template-columns:1fr 1fr}
 .ebk__foot-cols{grid-template-columns:1fr 1fr 1fr}.ebk__fc--b{grid-column:1/-1}
 .ebk__ret{padding-top:0}
}
@container (max-width:640px){
 .ebk__wrap{padding-left:16px;padding-right:16px}
 .ebk__ann-x{display:none}
 .ebk__burger{display:block;padding:8px 8px 8px 0;width:32px}
 .ebk__burger svg{width:24px;height:24px}
 .ebk__head-in{grid-template-columns:auto 1fr auto}
 .ebk__logo svg{display:none}.ebk__logo>span{font-size:21px}
 .ebk__cart-t{display:none}.ebk__cart{padding:9px 13px}
 .ebk__cats{display:none}.ebk__cats.is-open{display:block}.ebk__cats.is-open .ebk__cats-in{flex-direction:column;gap:0}
 .ebk__toast{right:16px;left:16px}
 .ebk__hero{padding-top:16px}
 .ebk__hero-main{min-height:420px}.ebk__hero-main::after{background:linear-gradient(0deg,rgba(29,24,20,.88) 0%,rgba(29,24,20,.45) 55%,rgba(29,24,20,.05) 100%)}
 .ebk__hero-txt{padding:24px}.ebk__h1{font-size:36px}
 .ebk__hero-side{grid-template-columns:1fr}
 .ebk__usp-in{grid-template-columns:1fr;gap:10px}
 .ebk__sec,.ebk__abo{padding:52px 0}
 .ebk__h2,.ebk__abo .ebk__h2{font-size:31px}.ebk__buy-h{font-size:34px}
 .ebk__tools{width:100%;justify-content:space-between;gap:10px;flex-wrap:wrap}.ebk__sort>span{display:none}
 .ebk__filters{grid-template-columns:1fr}
 .ebk__grid{grid-template-columns:1fr 1fr;gap:22px 12px}
 .ebk__bag i{font-size:15px}.ebk__bag small{font-size:8px}
 .ebk__p-h{font-size:16px}.ebk__p-f{flex-direction:column;align-items:flex-start;gap:8px}
 .ebk__add{font-size:13.5px;padding:10px 6px}
 .ebk__opt{grid-template-columns:1fr;gap:6px}
 .ebk__buyrow{flex-wrap:wrap}.ebk__buy-add{flex:1 1 100%}
 .ebk__calc{padding:20px}.ebk__seg button{font-size:13px;padding:11px 4px}
 .ebk__calc-out{grid-template-columns:1fr 1fr}.ebk__calc-out div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;flex-direction:row;justify-content:space-between;align-items:baseline}
 .ebk__calc-out b{font-size:24px}
 .ebk__tbl th:nth-child(2),.ebk__tbl td:nth-child(2){display:none}
 .ebk__revs{grid-template-columns:1fr}.ebk__r1,.ebk__r1:nth-child(-n+2){border-left:0;padding:20px 0;border-top:1px solid var(--line)}
 .ebk__r1:nth-child(3){grid-column:auto}
 .ebk__news-l{grid-template-columns:1fr}
 .ebk__nl{flex-direction:column;align-items:stretch;gap:16px}.ebk__nl-f{flex:1 1 auto}
 .ebk__foot-cols{grid-template-columns:1fr 1fr}
 .ebk__gal-th{grid-template-columns:repeat(3,1fr)}
}

// Ebbinge Koffiebranderij · webshop, Groningen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.ebk');if(!s)return;
function eur(n){return '€ '+n.toFixed(2).replace('.',',')}
var count=0,total=0,cn=s.querySelector('.ebk__cart-n'),ct=s.querySelector('.ebk__cart-t'),toast=s.querySelector('.ebk__toast'),tt;
function add(name,price,q){count+=q;total+=price*q;cn.textContent=count;ct.textContent=eur(total);cn.classList.add('is-pop');setTimeout(function(){cn.classList.remove('is-pop')},250);
 toast.textContent='Toegevoegd: '+q+'x '+name;toast.classList.add('is-on');clearTimeout(tt);tt=setTimeout(function(){toast.classList.remove('is-on')},2200)}
s.querySelectorAll('.ebk__add').forEach(function(b){b.addEventListener('click',function(){var p=b.closest('.ebk__p');add(b.dataset.name,parseFloat(p.dataset.price),1);
 b.classList.add('is-done');b.textContent='Toegevoegd';setTimeout(function(){b.classList.remove('is-done');b.textContent='In mand'},1600)})});
var grid=s.querySelector('.ebk__grid'),cards=[].slice.call(s.querySelectorAll('.ebk__p')),empty=s.querySelector('.ebk__empty'),cnt=s.querySelector('.ebk__count b'),boxes=s.querySelectorAll('.ebk__filters input'),sel=s.querySelector('.ebk__sort select');
function apply(){var f={};boxes.forEach(function(x){if(x.checked)(f[x.dataset.g]=f[x.dataset.g]||[]).push(x.value)});var n=0;
 cards.forEach(function(c){var ok=Object.keys(f).every(function(g){var have=(c.dataset[g]||'').split(' ');return f[g].some(function(v){return have.indexOf(v)>-1})});c.hidden=!ok;if(ok)n++});
 cnt.textContent=n;empty.hidden=n>0;
 var m=sel.value,sorted=cards.slice().sort(function(a,b){if(m==='asc')return a.dataset.price-b.dataset.price;if(m==='desc')return b.dataset.price-a.dataset.price;if(m==='roast')return a.dataset.r-b.dataset.r;return a.dataset.pop-b.dataset.pop});
 sorted.forEach(function(c){grid.insertBefore(c,empty)})}
boxes.forEach(function(x){x.addEventListener('change',apply)});sel.addEventListener('change',apply);
s.querySelectorAll('.ebk__reset').forEach(function(r){r.addEventListener('click',function(){boxes.forEach(function(x){x.checked=false});apply()})});
var ft=s.querySelector('.ebk__ftoggle'),fl=s.querySelector('.ebk__filters');ft.addEventListener('click',function(){var o=fl.classList.toggle('is-open');ft.setAttribute('aria-expanded',o)});
var bur=s.querySelector('.ebk__burger'),cats=s.querySelector('.ebk__cats');bur.addEventListener('click',function(){var o=cats.classList.toggle('is-open');bur.setAttribute('aria-expanded',o)});
var main=s.querySelector('.ebk__gal-main img'),xl=s.querySelector('.ebk__bag--xl');s.querySelectorAll('.ebk__gal-th button').forEach(function(b){b.addEventListener('click',function(){if(b.dataset.src){main.src=b.dataset.src;main.hidden=false;xl.hidden=true}else{main.hidden=true;xl.hidden=false}s.querySelectorAll('.ebk__gal-th button').forEach(function(x){x.classList.toggle('is-on',x===b)})})});
var unit=16.5,qi=s.querySelector('.ebk__qty input'),bp=s.querySelector('.ebk__buy-p');
function upd(){var q=Math.max(1,parseInt(qi.value,10)||1);qi.value=q;bp.textContent=eur(unit*q)}
s.querySelectorAll('.ebk__chip').forEach(function(c){c.addEventListener('click',function(){s.querySelectorAll('.ebk__chip').forEach(function(x){x.classList.toggle('is-on',x===c)});unit=parseFloat(c.dataset.p);upd()})});
s.querySelectorAll('.ebk__qty button').forEach(function(b){b.addEventListener('click',function(){qi.value=Math.max(1,(parseInt(qi.value,10)||1)+parseInt(b.dataset.q,10));upd()})});
qi.addEventListener('input',upd);
s.querySelector('.ebk__buy-add').addEventListener('click',function(){var g=s.querySelector('.ebk__chip.is-on').textContent;add('Huila Pink Bourbon '+g,unit,parseInt(qi.value,10)||1)});
var st={c:13.95,a:1.875,f:3};
function calc(){var full=st.c*st.a,l=full*.9,per=l*(52/12)/st.f,cups=(st.a*250/15)/(st.f*7);
 s.querySelector('.ebk__o-l').textContent=eur(l);s.querySelector('.ebk__o-o').textContent=eur(full);s.querySelector('.ebk__o-m').textContent=eur(per);s.querySelector('.ebk__o-c').textContent=cups.toFixed(1).replace('.',',')}
s.querySelectorAll('.ebk__seg').forEach(function(g){g.querySelectorAll('button').forEach(function(b){b.addEventListener('click',function(){g.querySelectorAll('button').forEach(function(x){x.classList.toggle('is-on',x===b)});st[g.dataset.k]=parseFloat(b.dataset.v);calc()})})});
calc();
s.querySelector('.ebk__nl-f').addEventListener('submit',function(e){e.preventDefault();var i=e.target.querySelector('input');i.value='';i.placeholder='Aangemeld, tot de volgende koffie'});
}
init(document.querySelector('.jouw-container'));