/* The product opening is visible even without native page-transition support. */
.bag-arrival-veil{position:fixed;inset:0;z-index:90;background:var(--paper);pointer-events:none;animation:bag-arrival-veil 1000ms ease both}
.bag-arrival-photo{position:fixed;z-index:91;object-fit:contain;max-width:none;pointer-events:none;background:var(--wash);box-shadow:0 24px 80px #211b1418}
@media(prefers-reduced-motion:no-preference){
  body[data-page=product] .product-media{animation:bag-product-unfold 950ms cubic-bezier(.2,.7,.25,1) both}
  body[data-page=product] .product-media .detail-gallery-photo>img,body[data-page=product] .product-media .detail-photo-button>img{animation:bag-product-photo 950ms cubic-bezier(.2,.7,.25,1) both}
  body[data-page=product] .product-heading{animation:bag-product-copy 700ms 170ms ease both}
  body[data-page=product] .product-information{animation:bag-product-copy 700ms 300ms ease both}
  html[data-bag-arrival] body[data-page=product] .product-media,html[data-bag-arrival] body[data-page=product] .product-media .detail-gallery-photo>img,html[data-bag-arrival] body[data-page=product] .product-media .detail-photo-button>img{animation:none}
  html[data-bag-arrival=pending] body[data-page=product] .product-media,html[data-bag-arrival=active] body[data-page=product] .product-media{opacity:0}
  html[data-bag-arrival=done] body[data-page=product] .product-heading,html[data-bag-arrival=done] body[data-page=product] .product-information{animation:none}
  @keyframes bag-product-unfold{from{opacity:0;clip-path:inset(8% 5%)}to{opacity:1;clip-path:inset(0)}}
  @keyframes bag-product-photo{from{transform:scale(.86)}to{transform:scale(1)}}
  @keyframes bag-product-copy{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@keyframes bag-arrival-veil{0%,25%{opacity:1}75%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .bag-arrival-veil,.bag-arrival-photo{display:none}
  body[data-page=product] .product-media,body[data-page=product] .product-media .detail-gallery-photo>img,body[data-page=product] .product-media .detail-photo-button>img,body[data-page=product] .product-heading,body[data-page=product] .product-information{opacity:1!important;animation:none!important;transform:none!important;clip-path:none!important}
}