Shopify CSS editing, and Theme manipulation

I already have a theme and I need custom modifications as shown below, with preserving pagespeed.

All customization below, are in English version of website, the Arabic version will be the same but in RTL direction.

English Website: dukkany.com/en
Arabic: dukkany.com

1- Menu

1-a Desktop
- To look like screenshot “Menu Desktop”

1-b Mobile
To look like screenshot “Menu Mobile 01” & “Menu Mobile 02”
———————
2- Footer

2-a Desktop
- Check screenshot “footer desktop”

2-b Mobile
- Check screenshot “footer mobile”
———————

3- Homepage

3-a Desktop

- Remove sidebar

3-b Mobile
———————

4- Product Page

4-a Desktop
- Check screenshots “Product Desktop 01”, “Product Desktop 02” & “Product Desktop 03”
- When clicking “Add to cart” , visitor will be directed to cart page.


4-b Mobile
- Check screenshots “Product Mobile 01”, “Product Mobile 02”, “Product Mobile 03” & “Product Mobile 04”

———————

5- Collection Page

5-a Desktop
- Check screenshot “Collection Desktop 01”

5-b Mobile
- Check screenshot “Collection Mobile 01”

———————

6- Cart

6-a Desktop
- Check screenshot “cart Desktop 01”


6-b Mobile
- Check screenshot “cart mobile 01”