I have a Dawn-based Shopify store and need every collection page—Best Sellers, New Arrivals and the rest—to present products in a true masonry grid that gracefully handles square, portrait and landscape images. Uniform alignment matters most to me; each item should snap into place without awkward gaps or broken rows. Only CSS Grid and vanilla JavaScript are permitted—please, no third-party apps or bloated libraries. The existing Shopify filtering sidebar and built-in pagination must remain fully functional, and badges plus native lazy-loading should behave exactly as they do now. Both desktop and mobile views have to stay perfectly responsive. Deliverables (all required): • main-collection-product-grid.liquid updated with the masonry markup • masonry.css containing the grid and responsive rules • masonry.js to handle any dynamic height calculations or reflow on resize If you can supply clean, well-commented code that drops into these files and meets the above criteria, I’m ready to get started.