:root{
  --atc-c: var(--green, oklch(52% .16 159));
  --atc-c2: var(--green2, oklch(42% .12 159));
  --atc-ok: oklch(62% .17 155);
  --atc-bad: var(--red, oklch(58% .16 24));
  --atc-ease: cubic-bezier(.16,1,.3,1);
  --atc-spring: cubic-bezier(.34,1.56,.64,1);
}

.atc-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s var(--atc-ease),box-shadow .25s var(--atc-ease),background-color .3s,color .3s,filter .2s}
.atc-btn>*:not(.atc-fx):not(.atc-ripple){transition:opacity .22s var(--atc-ease),transform .32s var(--atc-ease)}
.atc-btn:not(:disabled):hover{box-shadow:0 14px 30px -14px color-mix(in oklch,var(--atc-c),transparent 15%)}
.atc-btn:not(:disabled):active{transform:scale(.965)}
.atc-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--atc-ease)}
.atc-btn:not(:disabled):hover::after{transform:translateX(120%)}

.atc-lbl{display:inline-block}
.atc-fx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.atc-fx>span{grid-area:1/1;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--atc-spring)}
.atc-spin{width:18px;height:18px;border-radius:50%;
  border:2.5px solid color-mix(in oklch,currentColor,transparent 70%);border-top-color:currentColor;
  animation:atc-rot .7s linear infinite}
.atc-ok{width:24px;height:24px;display:grid;place-items:center}
.atc-ok svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24}

.atc-btn.atc-busy{pointer-events:none;filter:saturate(.9)}
.atc-btn.atc-busy>*:not(.atc-fx):not(.atc-ripple),
.atc-btn.atc-done>*:not(.atc-fx):not(.atc-ripple){opacity:0;transform:translateY(-8px) scale(.9)}
.atc-btn.atc-busy .atc-spin{opacity:1;transform:scale(1)}
.atc-btn.atc-busy::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);background-size:200% 100%;
  animation:atc-shim 1s linear infinite}

.atc-btn.atc-done{background:var(--atc-ok)!important;color:#fff!important;pointer-events:none;
  animation:atc-pulse .6s var(--atc-spring)}
.atc-btn.atc-done .atc-ok{opacity:1;transform:scale(1)}
.atc-btn.atc-done .atc-ok svg{animation:atc-draw .45s .08s var(--atc-ease) forwards}

.atc-btn.atc-fail{background:var(--atc-bad)!important;color:#fff!important;animation:atc-shake .45s var(--atc-ease)}

.atc-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(255,255,255,.45) 0,rgba(255,255,255,.18) 40%,transparent 70%);
  transform:scale(0);animation:atc-ripple .65s var(--atc-ease) forwards}

.atc-fly{position:fixed;z-index:2147483000;pointer-events:none;overflow:hidden;border-radius:18%;
  background:var(--surface,#fff);will-change:transform,opacity;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.35),0 0 0 3px color-mix(in oklch,var(--atc-c),transparent 55%)}
.atc-fly img{width:100%;height:100%;object-fit:cover;display:block}
.atc-fly.is-icon{display:grid;place-items:center;background:var(--atc-c);color:#fff}
.atc-fly.is-icon svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

[data-mini-open].atc-bump{animation:atc-bump .6s var(--atc-spring)}
[data-mini-open].atc-bump svg{animation:atc-tilt .6s var(--atc-ease)}
[data-cart-count].atc-pop{animation:atc-pop .55s var(--atc-spring)}

.atc-burst{position:fixed;width:0;height:0;z-index:2147483001;pointer-events:none}
.atc-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:oklch(70% .17 calc(var(--h) * 1deg));opacity:0;animation:atc-spark .75s var(--atc-ease) forwards}
.atc-burst i:nth-child(3n){width:4px;height:9px;border-radius:2px}

.atc-toast{position:fixed;z-index:2147482999;inset-inline-start:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:12px;width:min(420px,calc(100vw - 24px));padding:10px 12px 12px;
  background:color-mix(in oklch,var(--surface,#fff) 86%,transparent);color:var(--ink,#1a1a1a);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid color-mix(in oklch,var(--line,#e5e5e5),transparent 30%);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;transform:translate(50%,24px) scale(.96);
  transition:opacity .3s var(--atc-ease),transform .45s var(--atc-spring),visibility 0s .45s}
[dir=ltr] .atc-toast{transform:translate(-50%,24px) scale(.96)}
.atc-toast.on{opacity:1;visibility:visible;transform:translate(50%,0) scale(1);transition-delay:0s}
[dir=ltr] .atc-toast.on{transform:translate(-50%,0) scale(1)}
.atc-t-media{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:14px;overflow:visible;
  display:grid;place-items:center;background:var(--surface2,#f2f2f2)}
.atc-t-media>img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.atc-t-media>svg{width:24px;height:24px;fill:none;stroke:var(--atc-c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.atc-t-badge{position:absolute;inset-inline-end:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--atc-ok);color:#fff;box-shadow:0 0 0 3px var(--surface,#fff);
  transform:scale(0);animation:atc-pop .5s .15s var(--atc-spring) forwards}
.atc-t-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.atc-t-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.atc-t-txt b{font-weight:800;font-size:13px}
.atc-t-txt small{font-size:11.5px;color:var(--muted,#777);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atc-t-txt .atc-t-sum{color:var(--atc-c);font-weight:700}
.atc-t-act{display:flex;align-items:center;gap:6px}
.atc-t-go{padding:9px 14px;border-radius:12px;background:var(--atc-c);color:#fff;font-weight:800;font-size:12px;
  text-decoration:none;white-space:nowrap;transition:transform .2s var(--atc-ease),background .2s}
.atc-t-go:hover{background:var(--atc-c2);transform:translateY(-1px)}
.atc-t-x{width:30px;height:30px;border:0;border-radius:10px;background:transparent;color:var(--muted,#777);
  font-size:20px;line-height:1;cursor:pointer;transition:background .2s}
.atc-t-x:hover{background:var(--surface2,#f0f0f0)}
.atc-t-bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--atc-c);transform-origin:right;
  transform:scaleX(0)}
[dir=ltr] .atc-t-bar{transform-origin:left}
.atc-toast.on .atc-t-bar{animation:atc-bar 4.2s linear forwards}
.atc-toast:hover .atc-t-bar{animation-play-state:paused}

@media (max-width:720px){
  .atc-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

@keyframes atc-rot{to{transform:rotate(360deg)}}
@keyframes atc-shim{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes atc-draw{to{stroke-dashoffset:0}}
@keyframes atc-pulse{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes atc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes atc-ripple{to{transform:scale(1);opacity:0}}
@keyframes atc-bump{0%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes atc-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}}
@keyframes atc-pop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes atc-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes atc-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .atc-btn,.atc-btn *,.atc-toast,.atc-toast *,[data-mini-open].atc-bump,[data-cart-count].atc-pop{animation:none!important;transition:none!important}
  .atc-btn.atc-done .atc-ok svg{stroke-dashoffset:0}
  .atc-t-badge{transform:none}
}