/* vk-addbag-anim-20261028.css - Add to Bag confirmation animation, round pill style.
   Store-only (linked from Cssjs-head-common, NOT css-shared). Item pages only: every rule hangs off a class the JS adds,
   except the first rule, which hides the old empty flying box. Does not set any background on the Add to Bag button
   (the site sets that inline for the grey/invalid state). Brand brown 675948, white text = AA. */

/* the old flying box (#add2CartMsg) is an empty white div; hide it so only the new thumb flies */
#add2CartMsg.add2CartMsg{display:none!important}

/* photo thumb that flies to the header cart */
.vk-ab-thumb{position:fixed;left:0;top:0;z-index:10060;display:block;box-sizing:border-box;
  border:2px solid #fff;border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 5px 16px rgba(32,27,20,.30);pointer-events:none;will-change:transform,opacity;
  margin:0;padding:0;max-width:none}

/* small floating text next to the button (absolute, in page coordinates, so it stays with the button if the page scrolls) */
.vk-ab-float{position:absolute;left:0;top:0;z-index:10061;box-sizing:border-box;margin:0;
  padding:6px 13px;border-radius:999px;background:#675948;color:#fff;
  font:700 13px/1.25 Manrope,Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 4px 12px rgba(32,27,20,.22);pointer-events:none;opacity:0;
  animation:vk-ab-float .95s ease-out forwards}
@keyframes vk-ab-float{
  0%{opacity:0;transform:translateY(6px) scale(.9)}
  20%{opacity:1;transform:translateY(-6px) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translateY(-34px) scale(1)}}

/* Add to Bag button while it says Added: pill ring pulse only (no background change, shape untouched) */
#add2CartBtn.vk-ab-added{animation:vk-ab-ring .95s ease-out}
@keyframes vk-ab-ring{
  0%{box-shadow:0 0 0 0 rgba(185,84,47,.55)}
  100%{box-shadow:0 0 0 12px rgba(185,84,47,0)}}

/* header cart icon: quick pop when the photo lands; count: bounce when it updates */
.vk-ab-pop{animation:vk-ab-pop .5s ease-out}
@keyframes vk-ab-pop{0%{transform:scale(1)}35%{transform:scale(1.22)}65%{transform:scale(.94)}100%{transform:scale(1)}}
.vk-ab-bounce{animation:vk-ab-bounce .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes vk-ab-bounce{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.7) translateY(-3px)}60%{transform:scale(.9) translateY(0)}100%{transform:scale(1) translateY(0)}}

/* screen readers: the label change on an input is not announced, so a polite status line says it */
.vk-ab-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* reduced motion: only the label change (JS also skips the motion; this is the belt and braces) */
@media (prefers-reduced-motion:reduce){
  .vk-ab-thumb,.vk-ab-float{display:none!important}
  #add2CartBtn.vk-ab-added,.vk-ab-pop,.vk-ab-bounce{animation:none!important}
}