/* Add-to-bag feedback: the product is wrapped into a parcel that flies to the header BAG (see js/parcel-transition.js). */
.bag-parcel{position:fixed;z-index:400;margin:0;overflow:hidden;border:1.5px solid #000;background:#fff;box-shadow:0 22px 48px rgba(0,0,0,.28);pointer-events:none;transform-origin:center;will-change:transform,opacity}
.bag-parcel__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.bag-parcel__flap{position:absolute;top:0;bottom:0;width:50%;background:#f4f3ef;will-change:transform}
.bag-parcel__flap--left{left:0;border-right:1px solid rgba(0,0,0,.55);transform-origin:left center}
.bag-parcel__flap--right{right:0;border-left:1px solid rgba(0,0,0,.55);transform-origin:right center}
.bag-parcel__tape{position:absolute;top:0;bottom:0;left:50%;width:16%;background:#000;transform-origin:center top;will-change:transform}
.bag-parcel__label{position:absolute;right:7%;bottom:8%;display:grid;gap:2px;border:1px solid #000;background:#fff;padding:5px 7px 4px;text-align:left;line-height:1;will-change:transform,opacity}
.bag-parcel__label b{font-family:var(--sync,inherit);font-size:9px;font-weight:700;letter-spacing:.12em}
.bag-parcel__label small{font-size:6.5px;letter-spacing:.14em}
.parcel-bag-pulse{animation:bag-pulse .45s cubic-bezier(.3,1.5,.5,1)}
.product-purchase button.is-added{background:#fff!important;color:#000!important;box-shadow:inset 0 0 0 1px #000;transition:background .15s,color .15s}
@keyframes bag-pulse{0%{transform:scale(1)}40%{transform:scale(1.24)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.parcel-bag-pulse{animation:none}}
