/* Gekopieerd uit NorthByte Lab, effect E278 (lab/effecten/E278-product-naar-mandje, 04-10-2026). Ongewijzigd. */
/* ==========================================================================
   E278 · Product vliegt naar het mandje
   Klik of tik op "In mandje" en een rondje met de productfoto vliegt in een
   boog naar het mandje bovenin. Het mandje veert even op, de teller telt
   mee en de knop zegt kort "Toegevoegd". Werkt met muis, vinger en
   toetsenbord; een schermlezer hoort wat er is toegevoegd. Alleen transform
   en opacity bewegen.
   Instellen met CSS-variabelen:
     --e278-kleur   kleur van de knop en de teller (standaard #7a3e1d)
     --e278-inkt    tekstkleur op de knop          (standaard #fff)
     --e278-maat    doorsnede van het vliegende rondje (standaard 56px)
   ========================================================================== */

/* Knop */
.e278-knop {
  position: relative; display: inline-grid; align-items: center; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  background: var(--e278-kleur, #7a3e1d); color: var(--e278-inkt, #fff); font: inherit; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.e278-knop > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.e278-knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.e278-klaar { opacity: 0; transform: translate3d(0, 100%, 0); }
.e278-knop.e278-toegevoegd .e278-label { opacity: 0; transform: translate3d(0, -100%, 0); }
.e278-knop.e278-toegevoegd .e278-klaar { opacity: 1; transform: none; }
.e278-knop:focus-visible { outline: 3px solid var(--e278-kleur, #7a3e1d); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .e278-knop:hover .e278-label svg { transform: translate3d(0, -2px, 0); }
}

/* Mandje met teller */
.e278-mandje { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: inherit; }
.e278-mandje svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.e278-teller {
  position: absolute; right: 0; top: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--e278-kleur, #7a3e1d); color: var(--e278-inkt, #fff);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.e278-teller:empty, .e278-teller[data-e278-nul] { opacity: 0; transform: scale(.4); }
.e278-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Het vliegende rondje (wordt door effect.js gemaakt) */
.e278-vlieger { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
.e278-vlieger-in {
  display: block; width: var(--e278-maat, 56px); height: var(--e278-maat, 56px);
  margin: calc(var(--e278-maat, 56px) / -2) 0 0 calc(var(--e278-maat, 56px) / -2);
  border-radius: 50%; overflow: hidden; background: var(--e278-kleur, #7a3e1d);
  border: 3px solid #fff;
}
.e278-vlieger-in img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e278-knop > span { transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
  html:not([data-rm]) .e278-knop .e278-label svg { transition: transform .25s ease; }
  html:not([data-rm]) .e278-knop:active { scale: .96; }
  html:not([data-rm]) .e278-knop { transition: scale .12s ease; }
  html:not([data-rm]) .e278-teller { transition: opacity .2s ease, transform .3s cubic-bezier(.3, .7, .3, 1.5); }
  html:not([data-rm]) .e278-mandje.e278-hup { animation: e278-hup .45s cubic-bezier(.3, .7, .3, 1.4); }
  html:not([data-rm]) .e278-mandje.e278-hup .e278-teller { animation: e278-tel .45s cubic-bezier(.3, .7, .3, 1.4); }
}
@keyframes e278-hup { 0% { transform: scale(1); } 35% { transform: scale(.85) rotate(-6deg); } 70% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }
@keyframes e278-tel { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }