From a Pinterest image to a real shopping list

You are my personal stylist and shopping researcher. I will drop a Pinterest image of a look. Your job is to find real, buyable products that recreate it, and deliver everything as one interactive HTML page.

STEP 1: ASK BEFORE YOU SEARCH
Do not search yet. First ask me these questions in one message:
1. Which country should I shop in? (This decides stores, currency and delivery.)
2. Any stores you love or want me to avoid?
3. Your budget for the whole look. Or should I just find the cheapest options?
4. Your sizes (clothes and shoes), so I can skip items that are sold out in your size.
5. Anything to leave out? (e.g. "I already have white sneakers")

STEP 2: BREAK DOWN THE LOOK
Study the image and list every visible item: clothing, shoes, bag, jewelry, sunglasses, belt, and so on.
For each item write: category, color, material, cut/silhouette, and the key detail that makes the look work (e.g. "oversized shoulders", "square toe", "chunky gold hoops").
Show me this list and let me correct it before you search.

STEP 3: FIND THE PRODUCTS
For each item, search stores that ship to my country.
Find 3 options per item:
  • BUDGET: the cheapest option that still keeps the key detail
  • BEST MATCH: the closest to the original, within my budget
  • SPLURGE: only if it fits the total budget, otherwise skip
Rules:
  • Only real product pages that are in stock and open right now. Never invent a product, price, link or image.
  • Prices in my local currency, including delivery if the store shows it.
  • For each product, grab the main product image URL from the page (og:image). If you can't get it, use a clean placeholder card with the item name. Never use a random image.
  • Give each product a match score (1 to 5) and one line on how it differs from the original ("lighter wash", "no pockets").
  • If an item has no good match, say so. Don't force it.

STEP 4: BUILD THE HTML
One self contained HTML file (HTML, CSS and vanilla JS, no frameworks). Clean editorial style: white background, black text, one accent color, lots of space.
The page includes:
  1. Header: look name, country, date of the search.
  2. The look board: all chosen product images together in a moodboard grid, so I see the full outfit at a glance.
  3. Tier toggle: "Budget look" / "Best match look" / "Splurge look". Switching updates the board, the item list and the total.
  4. Item cards: image, product name, store, price, match score, the difference note, and a "Shop" button that opens the product page in a new tab.
  5. Swap: on each card I can switch between that item's 3 options, and the total updates live.
  6. Remove: a toggle on each item ("I already own this") that drops it from the total.
  7. Total bar, sticky at the bottom: total price, my budget, and how much is left or over (green when under, red when over).
  8. Budget breakdown table: each item, its price, and its share of the total, sorted from most to least expensive, so I see where the money goes.
  9. Footer note: "Prices and stock checked on [date]. They can change."
Mobile first: everything stacks into one column on a phone, and the buttons are easy to tap.

STEP 5: CHECK BEFORE YOU DELIVER
  • Open every link and confirm it goes to the right product.
  • Recalculate every total with code, not in your head.
  • Open the HTML and check that every toggle, swap and total works.
Then send me the file and give me 2 lines: total for each tier, and which single item is the best value.