/* A more expressive motion language across the public shop. Content stays visible without JS. */
@media(prefers-reduced-motion:no-preference){
 .smp-motion-pending{opacity:0}
 :where(.button,.icon-button,.text-link,.hero-explore,.collection-discover,.hero-campaign){transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
 :where(.desktop-nav a,.site-footer a,.mobile-menu nav a,.account-sidebar a,.information-nav a){transition:color .22s ease,box-shadow .22s ease,background-color .22s ease,translate .22s ease}
 :where(.account-field input,.account-field select,.variant-form select,[data-shop-filters] input,[data-shop-filters] select){transition:border-color .22s ease,box-shadow .22s ease}
 :where(.collection-image,.collection-story-image,.men-collection-image,.women-collection-image,.product-image){overflow:hidden}
 .home-page .collection-image>img,:is(.collection-image,.collection-story-image,.men-collection-image,.women-collection-image,.product-image)>img{transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s ease}
 :where(.button,.text-link,.collection-discover)>svg{transition:translate .3s ease}
 .member-benefits>a>svg{transition:transform .25s ease}
 .gallery-thumbnails button{transition:border-color .22s ease,opacity .22s ease}
 @media(hover:hover) and (pointer:fine){
  .button:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 10px 22px #12243c20}
  .button:not(:disabled):active{transform:translateY(0)}
  .icon-button:not(:disabled):hover{transform:translateY(-4px);background-color:#12243c0a}
  .home-page .collection-image:hover>img,:is(.collection-image,.collection-story-image,.men-collection-image,.women-collection-image,.product-image):hover>img{transform:scale(1.065)}
  :where(.text-link,.hero-explore,.collection-discover,.hero-campaign):hover{transform:translateX(6px)}
  :where(.button,.text-link,.collection-discover):hover>svg{translate:5px 0}
  .desktop-nav>a:hover{box-shadow:0 2px var(--navy);translate:0 -2px}
  .member-benefits>a:hover>svg{transform:translateX(7px)}
  :where(.information-nav a,.account-sidebar a):hover{color:var(--ocean,#3e6d86)}
  .site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
  .mobile-menu nav a:hover{background-color:#12243c06}
 }
}
@media(prefers-reduced-motion:reduce){
 .smp-motion-pending{opacity:1}
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.smp-motion-pending{opacity:1!important;transform:none!important}}