[NSFW] NSFW: Footer covering up bottom of website

Here is the custom CSS code that I am using regarding the footer:

#footer-sidebar {
background: #;
border-top-style: solid 3px #2aa03b;
position: fixed;
left: 0;
bottom: 45px;
width: 100%;
}
#colophon {
background: #34c94a;
padding: 15px 10px 15px 10px;
color: #f5f5f5;
font-size: 13px;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

The behavior that I would like is for the footer to remain anchored at the bottom of the page as well as not covering up any content.

The footer covers up the bottom of the content:

https://ibb.co/8z9y16mThe footer is covering up part of bottom row of products.

In addition, sometimes there are content on the main part of the page that overlay the footer in an odd way:

https://ibb.co/yF2MB7yThe sale icon is overlaying the footer in an odd manner.

https://ibb.co/4Nrh25DThe main slider is covering up the footer.

I would like the footer to remain at the bottom of the page as is, but I would like all of the content to not extend under the footer in addition to nothing overlaying the footer as well.

Thank you in advance for your time and effort!

The page I need help with: [log in to see the link]