@media (max-width: 700px) {
  .menu-button { position: relative; }
  .menu-button span {
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 4px);
    margin: 0;
  }
  .menu-button span:last-child { top: calc(50% + 4px); }
  .menu-button[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .menu-button span { transition: transform 180ms ease; }
  .site-header .site-nav.open,
  #retail-gallery[open] { animation: mobile-interaction-enter 180ms ease-out; }
  #retail-gallery[open]::backdrop { animation: mobile-backdrop-enter 180ms ease-out; }
  #gallery-image.gallery-image-entering { animation: mobile-photo-enter 180ms ease-out; }

  @keyframes mobile-interaction-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mobile-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes mobile-photo-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}