Notes:

- There is no linting js as I dont have setup machine, neither SASS, webpack to minimize js and other bits and bobs
- I've added css and js in html (not externally) as its easier for tester - there is no point here to add external btw you have critical css and oocss in html as best practice
- I am not using grammaly and other text correction as I dont like to being spied and this is also for company a security risk - I apologies for my wording, English is not my native language
- Sorting : each filter should feed from its own filter result ex. cached-pagination-1-byprice (100 results) cached-pagination-2-byprice (100 results) etc
- Product search / filtering functionality ideally should be use on dedicated DB replica.
- I want to cry -> I forgot about break; in switch and spend 2 hours why sorting doesnt work.... porque!!!!

Answers:

1. Would they approach this differently if the data was in a database table called ‘product’

- We should not get all data as this would impact database performance -> site performance (depending on quantity / how big data is) .
- Therefore we should use LIMIT and WHERE statement
- With ideally some caching (transients, MySQL caching config tweaks, Redis/MemCached, store in Json in CDN/S3 ideally + caching headers)
- We should not read products (static data) from database ideally as we should use database for writing purposes (mainly)
- If we need would be nice to have a cluster DB one for read and one for write to not impact writing (orders, payments etc) + speed of loading site
- um... I feel that I am missing something here....
- Returning to question - this depends on requirements - as for as I see from data which is all static I would use DB (with pagination as LIMIT in mind) -> cache <-> get

2. Appreciate to see some PHP back-end fetching the data.

- Don't understand the question here a bit - in sense, what means data here ?
- If you specific what data, should I use PDO or raw OMR or framework or CLI even - I can do it.

3. Is approach would be appropriate if 5,000 products needed to be loaded in this ‘category’.

Honestly saying, I would not change anything, just stare in the eyes of person who is asking it and say "Why!? o.O?".As its 5000 products
But I get the question - to check how you will deal with performance on the site.
Well common way is to use ancient pagination method and as I am aware there is no other solution - but I could be wrong here.. um.. Now I am curious.
I would use: 1. Basic "pagination" parameter in Json or 2. Use JsonAPI pagination or 3. Graphql, depending on how much time we have.
Additionaly I would load 500k and test speed of it, just for learning purposes... um.. now I am thinking I could split json 5k to smaller chunks use async and ... depends of size of this 5k...

Pixel perfect ?

Context switching is exhausting (jumping from design to logical thinking / abstraction / logical thinking) and I left it as it is - is not perfect
I've used css filter invert and position absolute - original vs mine img comparisment - font size can be wrong as I forgot setting using correct em rem, pardon.

If you have any question please dont hesitate to contact me.