/* Shared cross-document navigation treatment for the custom and legacy shells. */
@view-transition {
  navigation: auto;
}

[data-storefront-shell="v1"] {
  view-transition-name: commerce-storefront-header;
}

nav.c-bottom-nav[data-commerce-navigation="true"] {
  view-transition-name: commerce-bottom-navigation;
}

html[data-commerce-navigating] nav.c-bottom-nav[data-commerce-navigation="true"] {
  z-index: 100 !important;
}

::view-transition-group(commerce-storefront-header),
::view-transition-group(commerce-bottom-navigation) {
  z-index: 100;
  animation-duration: .12s;
}

::view-transition-old(commerce-storefront-header),
::view-transition-new(commerce-storefront-header),
::view-transition-old(commerce-bottom-navigation),
::view-transition-new(commerce-bottom-navigation) {
  animation-duration: .12s;
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .12s;
  animation-timing-function: ease-out;
  mix-blend-mode: normal;
}


@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(commerce-storefront-header),
  ::view-transition-old(commerce-storefront-header),
  ::view-transition-new(commerce-storefront-header),
  ::view-transition-group(commerce-bottom-navigation),
  ::view-transition-old(commerce-bottom-navigation),
  ::view-transition-new(commerce-bottom-navigation),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms;
  }
}