E-commerce page with lightbox gallery and cart functionality

What are you most proud of, and what would you do differently next time?

I'm pretty proud of how I set up the Add-to-cart functionality, which I planned and designed without consulting any tutorials. If I were to start over, I'd probably organize my CSS a bit better with less specific entries. I had the idea to start adding "flex-container" as a class to indicate flexboxes but I'm not sure if that's a good idea yet as it's slightly annoying to use devtools to play with flex properties when everything is relying on the same class

What challenges did you encounter, and how did you overcome them?

I had a really funny bug when building the lightbox where I was grabbing the "src" property of the click target, and using a function to extract the number from the filename to determine which image should be the main image (eg. if you click on an image with src of "image-thumbnail-2" it sets the index to 2 and shows main-image-2; I know, that's horrible), except I found out that VScode's live site extension adds "https://127.0.0:5500" to the front of the img src, so I had to hunt down why my index variable was randomly turning into 127 which broke the lightbox but for some reason only 30% of the time. ridiculous thing to hunt down, because I thought it was an issue with the index type being turned into a string at first.

Using chrome's live expressions tool to keep track of the variable and figure out exactly where it went wrong was tremendously useful. I ended up adding a unique class for each image and using that instead, which seems safer lol

What specific areas of your project would you like help with?

I wanted to animate the cart entries so that the other ones slide up to fill the gap instead of instantly moving, but it seems that is not possible in vanilla CSS unfortunately, and I wasn't confident in my JS enough to implement it. If there is in fact a way to do that in CSS I'd love to know.