Website Navigation Dropdown Enhancements

What needs to be done
Implementation checklist

1. Skin Conditions Dropdown
[ ] Convert the existing Skin Conditions menu into a hover dropdown matching the Treatments menu.
[ ] Add Pigmentation
[ ] Add Fine Lines & Wrinkles
[ ] Add Dry, Dehydrated Skin
[ ] Add Skin Sagging / Laxity
[ ] Add Melasma
[ ] Add Impaired Barrier & Eczema
[ ] Add Acne & Acne Scarring
[ ] Add Redness & Vascular Concerns
[ ] Link all 8 concerns to their respective pages or sections.

2. Shop by Product Dropdown
[ ] Convert Shop into a dropdown menu using the same design as Treatments.
[ ] Add a SHOP BY PRODUCT submenu with Makeup, Peels, Body, Sun Care, Sets, Masks, Exfoliant, Toners, Cleansers, Lips, Eye Care, Serum, Moisturizer, New Arrivals, and Gifting.
[ ] Link all 15 product types to their corresponding collections or categories.
[ ] Use the existing product categories on https://www.dermalglow.co.nz/shop-products as reference.

3. Shop by Brand Dropdown
[ ] Inspect the existing shop and identify every available product brand.
[ ] Add a SHOP BY BRAND submenu within Shop, if technically feasible.
[ ] List every identified brand in the submenu.
[ ] Link each brand to its corresponding collection or brand section.

4. Design and Responsiveness
[ ] Match the existing Treatments dropdown's fonts, colors, spacing, hover effects, layout, and overall appearance.
[ ] Ensure dropdowns and nested menus work on desktop, tablet, and mobile.
[ ] Support touch interactions on mobile and tablet.
[ ] Ensure menus are not clipped, overlapping, or extending outside the viewport.

5. Testing and Final Checks
[ ] Test all Skin Conditions links.
[ ] Test all Shop by Product and Shop by Brand links.
[ ] Verify hover, click, and tap behavior across screen sizes.
[ ] Confirm the existing Treatments menu and other navigation items still work.
[ ] Verify the header changes apply consistently across the website.