Act as a web designer for local businesses. Build a locations section for {{business_name}} in {{city}}. Locations, hours and notes: {{business_details}}. Reuse existing components and tokens. For each location: - name and address in an address element - phone as a tel: link - a weekly hours table with today highlighted, and special hours called out - an open-now line in words, computed in the location's time zone - directions: a Google Maps link using the destination parameter; on Apple devices, also offer Apple Maps - getting there: parking, transit, and step-free access, in plain words - a real photo of the entrance, so people recognize it The map: - a static map image first: fast, and no third-party cookies until someone asks - a "Show interactive map" button loads the embed; make sure keyboard focus can leave it - the list is the primary content and the map is secondary; nothing is only on the map Several locations: a list and the map side by side with pins matched to list items; a search by city or postcode; "Use my location" asks permission only when clicked, then sorts by distance with distances shown. Layout: 1280: list 5 columns, map 7 and sticky; 768: list, then map at 16:9; 360: list first, with the map behind a button. Cards 20px padding, 12px radius, 1px border. Type: location names 18 to 20px weight 600; hours in tabular-nums, 15px; today in weight 600. States: closed today, holiday hours, temporarily closed with a reason, a failed map load (the address and directions still work), a missing photo collapsing cleanly. Search: LocalBusiness structured data per location with openingHoursSpecification matching the visible hours. Motion: list to pin highlight in 150ms; none under prefers-reduced-motion. Avoid: an auto-loading embedded map with tracking, hours only in an image, "Click here for directions", a pulsing pin.