How the benchmark works

Build the product detail page of a premium online shop for the year 2030. It must look
high-end, offer state-of-the-art UX, and already be optimized for Agentic Commerce. This is
not just a UI exercise — it must demonstrate real eCommerce understanding and the ability to
solve non-trivial engineering problems in a single shot.

Pick a fictional premium product and a small catalog (one hero product + several related
products with real data: prices, ratings, stock, attributes).

REQUIRED — INTERACTIVE 3D PRODUCT CONFIGURATOR (WEBGL):
- Render the hero product in an interactive 3D configurator using the raw WebGL (or WebGL2)
  API. Write your own shaders. NO 3D/graphics libraries (no three.js, babylon, regl, etc.).
- The viewer must be animated (e.g. continuous subtle motion, 360° rotate, or a shader effect)
  AND interactive (drag to rotate / orbit, and move or change the light).
- It must be a real configurator: the user can configure the product across at least three
  option groups (e.g. color/material, a component or part, and a finish or add-on such as an
  engraving). Each choice updates the WebGL scene/material in real time.
- The configuration is the source of truth: it drives the displayed price (per-option price
  deltas), availability, the gallery, and what gets added to the cart (the chosen
  configuration must be reflected in the cart line item).
- Respect prefers-reduced-motion (provide a calm static fallback) and keep the canvas
  accessible (labelled, not a keyboard trap, with a non-WebGL fallback image and equivalent
  non-3D controls for every configuration option).

REQUIRED — REAL COMMERCE LOGIC (not just static markup):
- A working cart with add/remove, quantity changes, line items, live subtotal, tax, and a
  shipping rule with a free-shipping threshold; show it in a mini-cart/drawer.
- Variant-driven state: choosing color/size updates price, availability, gallery and the 3D
  material; handle out-of-stock and disabled combinations correctly.
- Dynamic pricing & promotions: discount with strikethrough, a "frequently bought together"
  bundle with a combined/discounted price, and at least one quantity break.
- A size / fit recommendation that computes a suggestion from user input.
- Instant client-side search or filtering over the catalog.
- Locale-aware price and number formatting (Intl APIs).

REQUIRED — AGENTIC COMMERCE:
- A built-in AI shopping assistant that actually performs actions in the UI (e.g. add to cart,
  recommend and apply a size, build a bundle, compare products) and shows its steps — not just
  a scripted chat bubble.

REQUIRED — QUALITY BAR:
- Mobile first, fluid micro-animations, Dark Mode, full WCAG AA accessibility.
- SEO done properly: semantic HTML and JSON-LD structured data (Product, Offer,
  AggregateRating, BreadcrumbList).
- Performance-oriented despite WebGL (target Lighthouse > 95): no layout shift, lazy work,
  no jank.

OUTPUT CONTRACT (mandatory):
- Deliver a single runnable, static web app in the current working directory.
- Entry point is an `index.html` file in the root. Use your own CSS and JS (separate files are
  fine, relatively linked).
- NO external libraries, UI/CSS frameworks, or CDN dependencies of any kind (no Tailwind,
  Bootstrap, Shadcn, jQuery, three.js, font CDNs, etc.). Everything must run offline.
- No build step: the app must work by serving the folder with a static web server.
- You may add sensible features, microcopy and details on your own initiative.

There are no follow-up questions and only a single run. Start implementing immediately.