/* ---------- Kosárba-gomb animáció + a termékkép repülése a kosárba (2026-09-09) ---------- */
.atc{position:relative;overflow:hidden;isolation:isolate}
.atc.is-run{pointer-events:none}
/* 1. fázis: a felirat elhalványul, a kitöltés áttetszővé válik, marad a körvonal */
.atc.is-run>*:not(.atc__cart):not(.atc__box):not(.atc__ok){opacity:0!important;transition:opacity .18s ease}
.atc.is-run{color:transparent!important}
.atc.is-run:not(.is-done){background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--brand,#0f6b41)}
/* 2. fázis: a kocsi átgurul a gombon, közben csomag hullik bele */
.atc__cart{position:absolute;left:0;top:50%;width:26px;height:26px;margin-top:-13px;color:var(--brand,#0f6b41);opacity:0;pointer-events:none}
.atc__cart svg{width:100%;height:100%;display:block}
.atc.is-run .atc__cart{animation:atcroll 1.15s cubic-bezier(.55,0,.35,1) .1s both}
.atc__box{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-24px 0 0 -3px;border-radius:2px;background:var(--brand,#0f6b41);opacity:0;pointer-events:none}
.atc.is-run .atc__box{animation:atcdrop .34s ease-in .34s both}
@keyframes atcroll{
 0%{transform:translateX(-40px) rotate(-8deg);opacity:0}
 14%{opacity:1}
 26%{transform:translateX(calc(50% - 13px)) rotate(0);left:50%;margin-left:-13px}
 26.01%,62%{left:50%;margin-left:-13px;transform:translateX(0);opacity:1}
 100%{left:50%;margin-left:-13px;transform:translateX(calc(50vw + 60px)) rotate(6deg);opacity:0}
}
@keyframes atcdrop{0%{transform:translateY(0) scale(.7) rotate(-12deg);opacity:0}30%{opacity:1}100%{transform:translateY(20px) scale(1) rotate(4deg);opacity:0}}
/* 3. fázis: a gomb körré húzódik és zöld pipa lesz */
.atc.is-done{background:var(--brand,#0f6b41)!important;box-shadow:none}
.atc.is-shrink{width:46px!important;min-width:46px!important;max-width:46px!important;flex:0 0 46px!important;align-self:center!important;padding-left:0!important;padding-right:0!important;border-radius:99px!important;transition:width .34s cubic-bezier(.34,1.3,.5,1),max-width .34s cubic-bezier(.34,1.3,.5,1),flex-basis .34s cubic-bezier(.34,1.3,.5,1),background .2s ease,box-shadow .2s ease}
.atc__ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.atc__ok svg{width:20px;height:20px;stroke:#fff;stroke-width:2.6;fill:none}
.atc.is-done .atc__ok{opacity:1;animation:atcpop .34s cubic-bezier(.34,1.5,.5,1) both}
.atc.is-done::after{content:'';position:absolute;inset:-6px;border-radius:99px;border:2px solid var(--brand,#0f6b41);opacity:.55;animation:atcring .6s ease-out both;pointer-events:none}
@keyframes atcpop{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes atcring{from{transform:scale(.72);opacity:.6}to{transform:scale(1.18);opacity:0}}
/* a kosárba repülő termékkép */
.flyimg{position:fixed;z-index:80;pointer-events:none;border-radius:50%;object-fit:cover;box-shadow:0 12px 30px -10px rgba(3,30,19,.4);will-change:transform,opacity}
.flyimg.iscut{border-radius:0;box-shadow:none;object-fit:contain}
.cart3.is-hit,.cart3__b.is-hit{animation:atcbump .42s cubic-bezier(.34,1.6,.5,1)}
@keyframes atcbump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
 .atc.is-run .atc__cart,.atc.is-run .atc__box,.atc.is-done .atc__ok,.atc.is-done::after,.cart3.is-hit,.cart3__b.is-hit{animation:none}
 .atc.is-shrink{transition:none}
 .flyimg{display:none}
}