So I think the issue is that all the HTML is wrapped on an
`off-canvas-wrap` class that is used for doing the sidebar car open over
main content. The problem is that when this car sidebar is open body of
HTML overflow is changed to `overflow: hidden` and search bar use CSS
`position: sticky;` which doesn't work when its parent has overflow
hidden. The issue was that `off-canvas-wrap` had an `overflow: inherit`
which means when body is set to overflow hidden this div inherits it and
break search bar position sticky when cart sidebar is opened. The
solution is to use `position: initial` which means use what a div has as
default value for `overflow` which I think it's `visible`. This class is
overriding the same class that comes from Foundation Framework that set
this div to be `overflow: hidden`. The override was added when [we added
search sticky](ff69389bb0)
More info about the problem with [position:sticky and its parent having
overflow hidden](https://css-tricks.com/dealing-with-overflow-and-position-sticky/) also info about [position initial vs inherit](https://stackoverflow.com/a/29661356)
- Partial is used by both the invoice pdf and the order confirmation email
- separate scss file for new payment list table
- extracted outstanding balance logic (also changed in payments view.. admin/orders/RXXX/payments)
- translations in shared.payments_list and lazy loaded
Not sure exactly why this happens, but when the mobile nav is opened the hero image at #tagline:before uses the height of the full window - often around 4000px. Adding max-height of 100% to the nearest safe parent prevents this behaviour.
This fixes the following deprecation warning
```
DEPRECATION WARNING: Extra .css in SCSS file is unnecessary. Rename /usr/src/app/app/assets/stylesheets/darkswarm/variables.css.scss to /usr/src/app/app/assets/stylesheets/darkswar
m/variables.scss. (called from _app_views_layouts_darkswarm_html_haml___3990351141569700945_46957256630860 at /usr/src/app/app/views/layouts/darkswarm.html.haml:18)
(...)
```
