@primestyleai/tryon 2.0.0 → 2.0.1

package/dist/react/index.js

@@ -1,96 +1,136 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-C9bJ1zKO.js";
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
+const LS_PREFIX = "primestyle_";
+function lsGet(key, fallback) {
+  try {
+    const raw = localStorage.getItem(LS_PREFIX + key);
+    return raw ? JSON.parse(raw) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function lsSet(key, value) {
+  try {
+    localStorage.setItem(LS_PREFIX + key, JSON.stringify(value));
+  } catch {
+  }
+}
+const SIZING_COUNTRIES = [
+  { code: "US", label: "United States" },
+  { code: "UK", label: "United Kingdom" },
+  { code: "EU", label: "Europe (EU)" },
+  { code: "FR", label: "France" },
+  { code: "IT", label: "Italy" },
+  { code: "DE", label: "Germany" },
+  { code: "ES", label: "Spain" },
+  { code: "JP", label: "Japan" },
+  { code: "CN", label: "China" },
+  { code: "KR", label: "South Korea" },
+  { code: "AU", label: "Australia" },
+  { code: "BR", label: "Brazil" }
+];
+const STEP_LABELS = ["", "Welcome", "Photo", "Size", "Generate", "Results"];
+const TOTAL_STEPS = 5;
+function detectLocale() {
+  const l = (navigator.language || "en-US").toLowerCase();
+  if (l.includes("en-gb") || l.includes("en-au")) return "UK";
+  if (l.includes("en")) return "US";
+  if (l.includes("fr")) return "FR";
+  if (l.includes("it")) return "IT";
+  if (l.includes("de") || l.includes("nl")) return "EU";
+  if (l.includes("ja")) return "JP";
+  if (l.includes("zh")) return "CN";
+  if (l.includes("ko")) return "KR";
+  return "US";
+}
+function isImperial(locale) {
+  return locale === "US" || locale === "UK";
+}
+function inToCm(inches) {
+  return +(inches * 2.54).toFixed(1);
+}
+function lbsToKg(lbs) {
+  return +(lbs / 2.205).toFixed(1);
+}
+function ftInToCm(ft, inch) {
+  return +(ft * 30.48 + inch * 2.54).toFixed(1);
+}
 function CameraIcon({ size = 18 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
+  ] });
 }
 function UploadIcon({ size = 48 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+  ] });
 }
 function XIcon({ size = 20 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
 }
 function AlertIcon({ size = 48 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
+}
+function ArrowLeftIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) });
+}
+function ArrowRightIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) });
+}
+function UserIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+  ] });
+}
+function ClockIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
+function RulerIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m14.5 12.5 2-2" }),
+    /* @__PURE__ */ jsx("path", { d: "m11.5 9.5 2-2" }),
+    /* @__PURE__ */ jsx("path", { d: "m8.5 6.5 2-2" }),
+    /* @__PURE__ */ jsx("path", { d: "m17.5 15.5 2-2" })
+  ] });
+}
+function SparkleIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
+}
+function TrashIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  ] });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) });
+}
+function CheckIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
 }
 function getApiKey() {
   const key = process.env.NEXT_PUBLIC_PRIMESTYLE_API_KEY ?? "";
-  if (!key) {
-    throw new PrimeStyleError(
-      "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY in environment variables",
-      "MISSING_API_KEY"
-    );
-  }
+  if (!key) throw new PrimeStyleError("Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY", "MISSING_API_KEY");
   return key;
 }
 function getApiUrl(override) {
@@ -98,6 +138,7 @@ function getApiUrl(override) {
 }
 function PrimeStyleTryon({
   productImage,
+  productTitle = "Product",
   buttonText = "Virtual Try-On",
   apiUrl,
   showPoweredBy = true,
@@ -119,12 +160,29 @@ function PrimeStyleTryon({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
-  const [countdown, setCountdown] = useState(20);
+  const [countdown, setCountdown] = useState(25);
+  const [sizingMethod, setSizingMethod] = useState(null);
+  const [sizingResult, setSizingResult] = useState(null);
+  const [sizeGuide, setSizeGuide] = useState(null);
+  const [sizingCountry, setSizingCountry] = useState(detectLocale);
+  const imperial = isImperial(sizingCountry);
+  const [sizingUnit, setSizingUnit] = useState(imperial ? "in" : "cm");
+  const [heightUnit, setHeightUnit] = useState(imperial ? "ft" : "cm");
+  const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
+  const [formData, setFormData] = useState({});
+  const [profiles, setProfiles] = useState(() => lsGet("profiles", []));
+  const [history, setHistory] = useState(() => lsGet("history", []));
+  const [activeProfileId, setActiveProfileId] = useState(null);
+  const [profileSaved, setProfileSaved] = useState(false);
+  const [drawer, setDrawer] = useState(null);
+  const [profileDetail, setProfileDetail] = useState(null);
   const fileInputRef = useRef(null);
   const apiRef = useRef(null);
   const sseRef = useRef(null);
   const unsubRef = useRef(null);
   const pollingRef = useRef(null);
+  const completedRef = useRef(false);
+  const bodyRef = useRef(null);
   useEffect(() => {
     try {
       const key = getApiKey();
@@ -143,12 +201,12 @@ function PrimeStyleTryon({
     if (view === "processing") {
       setCountdown(25);
       const interval = setInterval(() => {
-        setCountdown((prev) => {
-          if (prev <= 1) {
+        setCountdown((p) => {
+          if (p <= 1) {
             clearInterval(interval);
             return 0;
           }
-          return prev - 1;
+          return p - 1;
         });
       }, 1e3);
       return () => clearInterval(interval);
@@ -177,17 +235,47 @@ function PrimeStyleTryon({
       };
     }
   }, [view]);
+  useEffect(() => {
+    lsSet("profiles", profiles);
+  }, [profiles]);
+  useEffect(() => {
+    lsSet("history", history);
+  }, [history]);
+  const stepIndex = useMemo(() => {
+    switch (view) {
+      case "welcome":
+        return 1;
+      case "upload":
+        return 2;
+      case "sizing-choice":
+      case "sizing-form":
+        return 3;
+      case "processing":
+        return 4;
+      case "result":
+        return 5;
+      default:
+        return 1;
+    }
+  }, [view]);
   const handleOpen = useCallback(() => {
-    setView("upload");
+    setView("welcome");
     onOpen?.();
   }, [onOpen]);
   const handleClose = useCallback(() => {
     setView("idle");
     setSelectedFile(null);
+    setDrawer(null);
+    setProfileDetail(null);
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     setPreviewUrl(null);
     setResultImageUrl(null);
     setErrorMessage(null);
+    setSizingMethod(null);
+    setSizingResult(null);
+    setSizeGuide(null);
+    setProfileSaved(false);
+    setFormData({});
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -196,32 +284,28 @@ function PrimeStyleTryon({
     }
     onClose?.();
   }, [onClose, previewUrl]);
-  const handleFileSelect = useCallback(
-    (file) => {
-      if (!isValidImageFile(file)) {
-        setErrorMessage("Please upload a JPEG, PNG, or WebP image.");
-        setView("error");
-        onError?.({ message: "Invalid file type", code: "INVALID_FILE" });
-        return;
-      }
-      if (file.size > 10 * 1024 * 1024) {
-        setErrorMessage("Image must be under 10MB.");
-        setView("error");
-        onError?.({ message: "File too large", code: "FILE_TOO_LARGE" });
-        return;
-      }
-      setSelectedFile(file);
-      setPreviewUrl(URL.createObjectURL(file));
-      onUpload?.(file);
-    },
-    [onUpload, onError]
-  );
+  const handleFileSelect = useCallback((file) => {
+    if (!isValidImageFile(file)) {
+      setErrorMessage("Please upload a JPEG, PNG, or WebP image.");
+      setView("error");
+      onError?.({ message: "Invalid file type", code: "INVALID_FILE" });
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setErrorMessage("Image must be under 10MB.");
+      setView("error");
+      onError?.({ message: "File too large", code: "FILE_TOO_LARGE" });
+      return;
+    }
+    setSelectedFile(file);
+    setPreviewUrl(URL.createObjectURL(file));
+    onUpload?.(file);
+  }, [onUpload, onError]);
   const handleRemovePreview = useCallback(() => {
     setSelectedFile(null);
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     setPreviewUrl(null);
   }, [previewUrl]);
-  const completedRef = useRef(false);
   const cleanupJob = useCallback(() => {
     if (pollingRef.current) {
       clearInterval(pollingRef.current);
@@ -230,36 +314,76 @@ function PrimeStyleTryon({
     unsubRef.current?.();
     unsubRef.current = null;
   }, []);
-  const handleVtoUpdate = useCallback(
-    (update) => {
-      if (update.status === "completed" && update.imageUrl) {
-        setResultImageUrl((prev) => {
-          if (!prev || prev.startsWith("data:")) return update.imageUrl;
-          if (!update.imageUrl.startsWith("data:")) return update.imageUrl;
-          return prev;
-        });
-        if (!completedRef.current) {
-          completedRef.current = true;
-          cleanupJob();
-          setView("result");
-          onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
-        }
-      } else if (update.status === "failed") {
-        if (!completedRef.current) {
-          completedRef.current = true;
-          cleanupJob();
-          const msg = update.error || "Try-on generation failed";
-          setErrorMessage(msg);
-          setView("error");
-          onError?.({ message: msg });
-        }
+  const handleVtoUpdate = useCallback((update) => {
+    if (update.status === "completed" && update.imageUrl) {
+      setResultImageUrl((prev) => {
+        if (!prev || prev.startsWith("data:")) return update.imageUrl;
+        if (!update.imageUrl.startsWith("data:")) return update.imageUrl;
+        return prev;
+      });
+      if (!completedRef.current) {
+        completedRef.current = true;
+        cleanupJob();
+        setView("result");
+        onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
       }
-    },
-    [onComplete, onError, cleanupJob]
-  );
+    } else if (update.status === "failed") {
+      if (!completedRef.current) {
+        completedRef.current = true;
+        cleanupJob();
+        const msg = update.error || "Try-on generation failed";
+        setErrorMessage(msg);
+        setView("error");
+        onError?.({ message: msg });
+      }
+    }
+  }, [onComplete, onError, cleanupJob]);
+  const submitSizing = useCallback(async () => {
+    if (!apiRef.current) return;
+    const baseUrl = getApiUrl(apiUrl);
+    const key = getApiKey();
+    const payload = {
+      method: sizingMethod,
+      locale: sizingCountry,
+      product: { title: productTitle, variants: [] }
+    };
+    if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
+    if (sizingMethod === "exact") {
+      const m = { gender: formData.gender || "male" };
+      if (formData.height) m.heightCm = heightUnit === "ft" ? ftInToCm(parseFloat(formData.heightFeet || "0"), parseFloat(formData.heightInches || "0")) : parseFloat(formData.height);
+      if (formData.weight) m.weightKg = weightUnit === "lbs" ? lbsToKg(parseFloat(formData.weight)) : parseFloat(formData.weight);
+      const keys = ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"];
+      for (const k of keys) {
+        if (formData[k]) m[k] = sizingUnit === "in" ? inToCm(parseFloat(formData[k])) : parseFloat(formData[k]);
+      }
+      if (formData.shoeEU) m.shoeEU = formData.shoeEU;
+      if (formData.shoeUS) m.shoeUS = formData.shoeUS;
+      if (formData.shoeUK) m.shoeUK = formData.shoeUK;
+      if (formData.fitPreference) m.fitPreference = formData.fitPreference;
+      payload.measurements = m;
+    } else {
+      payload.quickEstimate = {
+        heightCm: heightUnit === "ft" ? ftInToCm(parseFloat(formData.heightFeet || "0"), parseFloat(formData.heightInches || "0")) : parseFloat(formData.height || "0"),
+        weightKg: weightUnit === "lbs" ? lbsToKg(parseFloat(formData.weight || "0")) : parseFloat(formData.weight || "0"),
+        gender: formData.gender || "male"
+      };
+    }
+    try {
+      const res = await fetch(`${baseUrl}/api/v1/sizing/recommend`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+        body: JSON.stringify(payload)
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setSizingResult(data);
+      }
+    } catch {
+    }
+  }, [apiUrl, sizingMethod, sizingCountry, formData, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
   const handleSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
-      const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY in environment variables" : "No file selected";
+      const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY" : "No file selected";
       setErrorMessage(msg);
       setView("error");
       onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
@@ -267,17 +391,12 @@ function PrimeStyleTryon({
     }
     completedRef.current = false;
     setView("processing");
+    if (sizingMethod) submitSizing();
     try {
       const modelImage = await compressImage(selectedFile);
-      const response = await apiRef.current.submitTryOn(
-        modelImage,
-        productImage
-      );
+      const response = await apiRef.current.submitTryOn(modelImage, productImage);
       onProcessing?.(response.jobId);
-      unsubRef.current = sseRef.current.onJob(
-        response.jobId,
-        (update) => handleVtoUpdate(update)
-      );
+      unsubRef.current = sseRef.current.onJob(response.jobId, handleVtoUpdate);
       let attempts = 0;
       pollingRef.current = setInterval(async () => {
         if (completedRef.current) {
@@ -294,13 +413,7 @@ function PrimeStyleTryon({
         try {
           const status = await apiRef.current.getStatus(response.jobId);
           if (status.status === "completed" || status.status === "failed") {
-            handleVtoUpdate({
-              galleryId: response.jobId,
-              status: status.status,
-              imageUrl: status.imageUrl,
-              error: status.status === "failed" ? status.message : null,
-              timestamp: Date.now()
-            });
+            handleVtoUpdate({ galleryId: response.jobId, status: status.status, imageUrl: status.imageUrl, error: status.status === "failed" ? status.message : null, timestamp: Date.now() });
           }
         } catch {
         }
@@ -312,7 +425,7 @@ function PrimeStyleTryon({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate]);
+  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate, sizingMethod, submitSizing]);
   const handleDownload = useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -339,8 +452,103 @@ function PrimeStyleTryon({
     setPreviewUrl(null);
     setResultImageUrl(null);
     setErrorMessage(null);
+    setSizingMethod(null);
+    setSizingResult(null);
+    setProfileSaved(false);
     setView("upload");
   }, [previewUrl, cleanupJob]);
+  const applyProfile = useCallback((id) => {
+    const p = profiles.find((pr) => pr.id === id);
+    if (!p) return;
+    setActiveProfileId(id);
+    const fd = { gender: p.gender || "male" };
+    if (p.heightCm) fd.height = String(p.heightCm);
+    if (p.weightKg) fd.weight = String(p.weightKg);
+    if (p.chest) fd.chest = String(p.chest);
+    if (p.bust) fd.bust = String(p.bust);
+    if (p.waist) fd.waist = String(p.waist);
+    if (p.hips) fd.hips = String(p.hips);
+    if (p.shoulderWidth) fd.shoulderWidth = String(p.shoulderWidth);
+    if (p.sleeveLength) fd.sleeveLength = String(p.sleeveLength);
+    if (p.inseam) fd.inseam = String(p.inseam);
+    if (p.neckCircumference) fd.neckCircumference = String(p.neckCircumference);
+    if (p.footLengthCm) fd.footLengthCm = String(p.footLengthCm);
+    if (p.shoeEU) fd.shoeEU = p.shoeEU;
+    if (p.shoeUS) fd.shoeUS = p.shoeUS;
+    if (p.shoeUK) fd.shoeUK = p.shoeUK;
+    if (p.fitPreference) fd.fitPreference = p.fitPreference;
+    setFormData(fd);
+  }, [profiles]);
+  const saveProfile = useCallback((name) => {
+    const id = activeProfileId || `p_${Date.now()}`;
+    const p = {
+      id,
+      name,
+      gender: formData.gender || "male",
+      heightCm: formData.height ? parseFloat(formData.height) : void 0,
+      weightKg: formData.weight ? parseFloat(formData.weight) : void 0,
+      chest: formData.chest ? parseFloat(formData.chest) : void 0,
+      bust: formData.bust ? parseFloat(formData.bust) : void 0,
+      waist: formData.waist ? parseFloat(formData.waist) : void 0,
+      hips: formData.hips ? parseFloat(formData.hips) : void 0,
+      shoulderWidth: formData.shoulderWidth ? parseFloat(formData.shoulderWidth) : void 0,
+      sleeveLength: formData.sleeveLength ? parseFloat(formData.sleeveLength) : void 0,
+      inseam: formData.inseam ? parseFloat(formData.inseam) : void 0,
+      neckCircumference: formData.neckCircumference ? parseFloat(formData.neckCircumference) : void 0,
+      footLengthCm: formData.footLengthCm ? parseFloat(formData.footLengthCm) : void 0,
+      shoeEU: formData.shoeEU,
+      shoeUS: formData.shoeUS,
+      shoeUK: formData.shoeUK,
+      fitPreference: formData.fitPreference,
+      createdAt: Date.now()
+    };
+    setProfiles((prev) => {
+      const idx = prev.findIndex((x) => x.id === id);
+      if (idx >= 0) {
+        const next = [...prev];
+        next[idx] = p;
+        return next;
+      }
+      return [...prev, p].slice(-50);
+    });
+    setActiveProfileId(id);
+    setProfileSaved(true);
+  }, [activeProfileId, formData]);
+  const saveHistoryEntry = useCallback(() => {
+    const entry = {
+      id: `h_${Date.now()}`,
+      productTitle,
+      productImage,
+      resultImageUrl: resultImageUrl || void 0,
+      recommendedSize: sizingResult?.recommendedSize,
+      confidence: sizingResult?.confidence,
+      reasoning: sizingResult?.reasoning,
+      internationalSizes: sizingResult?.internationalSizes,
+      matchDetails: sizingResult?.matchDetails,
+      date: Date.now()
+    };
+    if (activeProfileId) {
+      const p = profiles.find((x) => x.id === activeProfileId);
+      if (p) entry.profileName = p.name;
+    }
+    setHistory((prev) => [entry, ...prev].slice(0, 50));
+  }, [productTitle, productImage, resultImageUrl, sizingResult, activeProfileId, profiles]);
+  useEffect(() => {
+    if (view === "result" && (resultImageUrl || sizingResult)) {
+      saveHistoryEntry();
+    }
+  }, [view]);
+  const updateField = useCallback((key, val) => {
+    setFormData((prev) => ({ ...prev, [key]: val }));
+  }, []);
+  const shoeField = useMemo(() => {
+    const map = {
+      US: { key: "shoeUS", label: "Shoe size (US)", ph: "e.g. 10" },
+      UK: { key: "shoeUK", label: "Shoe size (UK)", ph: "e.g. 9" },
+      AU: { key: "shoeUK", label: "Shoe size (UK)", ph: "e.g. 9" }
+    };
+    return map[sizingCountry] || { key: "shoeEU", label: "Shoe size (EU)", ph: "e.g. 43" };
+  }, [sizingCountry]);
   const rootVars = {
     "--ps-btn-bg": btnS.backgroundColor,
     "--ps-btn-color": btnS.textColor,
@@ -377,520 +585,847 @@ function PrimeStyleTryon({
     "--ps-loader": mdlS.loaderColor,
     "--ps-result-radius": mdlS.resultBorderRadius
   };
-  const cssVars = Object.fromEntries(
-    Object.entries(rootVars).filter(([, v]) => v !== void 0)
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx("ps-tryon-root", cn.root || className),
-      style: { ...cssVars, ...style },
-      "data-ps-tryon": true,
-      children: [
-        /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
-          /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
-          /* @__PURE__ */ jsx("span", { children: buttonText })
+  const cssVars = Object.fromEntries(Object.entries(rootVars).filter(([, v]) => v !== void 0));
+  function Stepper() {
+    if (view === "error" || view === "idle") return null;
+    return /* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-track", children: Array.from({ length: TOTAL_STEPS }, (_, i) => i + 1).map((i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-stepper-fragment", children: [
+      i > 1 && /* @__PURE__ */ jsx("div", { className: `ps-tryon-stepper-line${i <= stepIndex ? " ps-done" : ""}` }),
+      /* @__PURE__ */ jsxs("div", { className: `ps-tryon-stepper-step${i < stepIndex ? " ps-done" : i === stepIndex ? " ps-active" : ""}`, children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-circle", children: i < stepIndex ? /* @__PURE__ */ jsx(CheckIcon, {}) : i }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-label", children: STEP_LABELS[i] })
+      ] })
+    ] }, i)) }) });
+  }
+  function InputRow({ label, fieldKey, placeholder, type = "text", unit }) {
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+      /* @__PURE__ */ jsx("label", { children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          placeholder,
+          value: formData[fieldKey] || "",
+          onChange: (e) => updateField(fieldKey, e.target.value)
+        }
+      ),
+      unit && /* @__PURE__ */ jsx("span", { className: "ps-tryon-input-unit", children: unit })
+    ] });
+  }
+  function UnitToggle({ options, value, onChange }) {
+    return /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: options.map((o) => /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${value === o.value ? " ps-active" : ""}`, onClick: () => onChange(o.value), children: o.label }, o.value)) });
+  }
+  function WelcomeView() {
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome-hero", children: [
+        productImage && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome-img-wrap", children: [
+          /* @__PURE__ */ jsx("img", { src: productImage, alt: "Product", className: "ps-tryon-welcome-product" }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-sparkle", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 20 }) })
         ] }),
-        view !== "idle" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx("ps-tryon-overlay", cn.overlay),
-            onClick: (e) => {
-              if (e.target === e.currentTarget) handleClose();
-            },
-            children: /* @__PURE__ */ jsxs(
-              "div",
+        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: "See How It Looks On You" }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: "Virtual try-on + AI size recommendation" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
+        { icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: "Upload Photo", desc: "Share a photo of yourself" },
+        { icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: "Find Your Size", desc: "AI-powered fit analysis" },
+        { icon: /* @__PURE__ */ jsx(SparkleIcon, {}), title: "See Results", desc: "Try-on in seconds" }
+      ].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-title", children: f.title }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-desc", children: f.desc })
+      ] }, i)) }),
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
+        "Let’s Get Started ",
+        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-note", children: "Takes less than a minute" })
+    ] });
+  }
+  function UploadView() {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
+        if (e.target.value) applyProfile(e.target.value);
+      }, children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
+        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
+          p.name,
+          " (",
+          p.gender === "female" ? "Women's" : "Men's",
+          ")"
+        ] }, p.id))
+      ] }) }),
+      selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
+          /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
+          "Continue to Sizing ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(`ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`, cn.uploadZone),
+          onClick: () => fileInputRef.current?.click(),
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: () => setDragOver(false),
+          onDrop: (e) => {
+            e.preventDefault();
+            setDragOver(false);
+            const f = e.dataTransfer?.files?.[0];
+            if (f) handleFileSelect(f);
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
               {
-                className: cx("ps-tryon-modal", cn.modal),
-                onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
-                    /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: "Virtual Try-On" }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleClose,
-                        className: cx("ps-tryon-close", cn.closeButton),
-                        children: /* @__PURE__ */ jsx(XIcon, {})
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-body", cn.body), children: [
-                    view === "upload" && /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
-                        /* @__PURE__ */ jsx(
-                          "img",
-                          {
-                            src: previewUrl,
-                            alt: "Your photo",
-                            className: cn.previewImage
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: handleRemovePreview,
-                            className: cx(
-                              "ps-tryon-preview-remove",
-                              cn.removeButton
-                            ),
-                            children: "×"
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: handleSubmit,
-                          className: cx("ps-tryon-submit", cn.submitButton),
-                          children: "Try It On"
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: cx(
-                          `ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`,
-                          cn.uploadZone
-                        ),
-                        onClick: () => fileInputRef.current?.click(),
-                        onDragOver: (e) => {
-                          e.preventDefault();
-                          setDragOver(true);
-                        },
-                        onDragLeave: () => setDragOver(false),
-                        onDrop: (e) => {
-                          e.preventDefault();
-                          setDragOver(false);
-                          const file = e.dataTransfer?.files?.[0];
-                          if (file) handleFileSelect(file);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              ref: fileInputRef,
-                              type: "file",
-                              accept: "image/jpeg,image/png,image/webp",
-                              style: { display: "none" },
-                              onChange: (e) => {
-                                const file = e.target.files?.[0];
-                                if (file) handleFileSelect(file);
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(UploadIcon, {}),
-                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
-                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
-                        ]
-                      }
-                    ) }),
-                    view === "processing" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-                      countdown > 0 ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
-                        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
-                          /* @__PURE__ */ jsx(
-                            "circle",
-                            {
-                              className: "ps-tryon-countdown-track",
-                              cx: "60",
-                              cy: "60",
-                              r: "52"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "circle",
-                            {
-                              className: "ps-tryon-countdown-progress",
-                              cx: "60",
-                              cy: "60",
-                              r: "52",
-                              style: {
-                                strokeDashoffset: `${countdown / 25 * 326.73}`
-                              }
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx("span", { className: "ps-tryon-countdown-number", children: countdown })
-                      ] }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-done-pulse", children: /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }) }),
-                      /* @__PURE__ */ jsx(
-                        "p",
-                        {
-                          className: cx(
-                            "ps-tryon-processing-text",
-                            cn.processingText
-                          ),
-                          children: countdown > 0 ? "Generating your try-on..." : "Almost there..."
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "p",
-                        {
-                          className: cx(
-                            "ps-tryon-processing-sub",
-                            cn.processingSubText
-                          ),
-                          children: countdown > 0 ? "This usually takes 15-25 seconds" : "Finishing up your look"
-                        }
-                      )
-                    ] }),
-                    view === "result" && resultImageUrl && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result", cn.result), children: [
-                      /* @__PURE__ */ jsx(
-                        "img",
-                        {
-                          src: resultImageUrl,
-                          alt: "Try-on result",
-                          className: cn.resultImage
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: cx(
-                            "ps-tryon-result-actions",
-                            cn.resultActions
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: handleDownload,
-                                className: cx("ps-tryon-btn-download", cn.downloadButton),
-                                children: "Download"
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                onClick: handleRetry,
-                                className: cx("ps-tryon-btn-retry", cn.retryButton),
-                                children: "Try Another"
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ] }),
-                    view === "error" && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-error", cn.error), children: [
-                      /* @__PURE__ */ jsx(AlertIcon, {}),
-                      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || "Something went wrong" }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: handleRetry,
-                          className: cx("ps-tryon-submit", cn.submitButton),
-                          children: "Try Again"
-                        }
-                      )
-                    ] })
-                  ] }),
-                  showPoweredBy && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-powered", cn.poweredBy), children: [
-                    "Powered by",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        href: "https://myaifitting.com",
-                        target: "_blank",
-                        rel: "noopener noreferrer",
-                        children: "PrimeStyle AI"
-                      }
-                    )
-                  ] })
-                ]
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/jpeg,image/png,image/webp",
+                style: { display: "none" },
+                onChange: (e) => {
+                  const f = e.target.files?.[0];
+                  if (f) handleFileSelect(f);
+                }
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-        .ps-tryon-root {
-          display: inline-block;
+            ),
+            /* @__PURE__ */ jsx(UploadIcon, {}),
+            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
+            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
+          ]
         }
+      )
+    ] });
+  }
+  function SizingChoiceView() {
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "How would you like to find your size?" }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+          setSizingMethod("exact");
+          setView("sizing-form");
+        }, children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Exact Measurements" }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Enter your body measurements for the most accurate fit" }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Most Accurate" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+          setSizingMethod("quick");
+          setView("sizing-form");
+        }, children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Quick Estimate" }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just height, weight & gender — fast but less precise" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "ps-tryon-skip-btn", onClick: () => {
+        setSizingMethod(null);
+        handleSubmit();
+      }, children: "Skip sizing — just try it on" })
+    ] });
+  }
+  function SizingFormView() {
+    const isFemale = formData.gender === "female";
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: "Sizing region" }),
+        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: "Gender" }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
+          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${formData.gender !== "female" ? " ps-active" : ""}`, onClick: () => updateField("gender", "male"), children: "Men's" }),
+          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${formData.gender === "female" ? " ps-active" : ""}`, onClick: () => updateField("gender", "female"), children: "Women's" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: "Height" }),
+        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft/in", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
+      ] }),
+      heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row ps-tryon-dual-input", children: [
+        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "ft", value: formData.heightFeet || "", onChange: (e) => updateField("heightFeet", e.target.value) }),
+        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "in", value: formData.heightInches || "", onChange: (e) => updateField("heightInches", e.target.value) })
+      ] }) : /* @__PURE__ */ jsx(InputRow, { label: "", fieldKey: "height", placeholder: "e.g. 175", type: "number", unit: "cm" }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: "Weight" }),
+        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
+      ] }),
+      /* @__PURE__ */ jsx(InputRow, { label: "", fieldKey: "weight", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", type: "number", unit: weightUnit }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+          /* @__PURE__ */ jsx("label", { children: "Measurements" }),
+          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: setSizingUnit })
+        ] }),
+        isFemale ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(InputRow, { label: "Bust", fieldKey: "bust", placeholder: "e.g. 90", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Waist", fieldKey: "waist", placeholder: "e.g. 70", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Hips", fieldKey: "hips", placeholder: "e.g. 95", type: "number", unit: sizingUnit })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(InputRow, { label: "Chest", fieldKey: "chest", placeholder: "e.g. 100", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Waist", fieldKey: "waist", placeholder: "e.g. 82", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Hips", fieldKey: "hips", placeholder: "e.g. 98", type: "number", unit: sizingUnit })
+        ] }),
+        /* @__PURE__ */ jsx(InputRow, { label: "Shoulder Width", fieldKey: "shoulderWidth", placeholder: "e.g. 45", type: "number", unit: sizingUnit }),
+        /* @__PURE__ */ jsx(InputRow, { label: "Sleeve Length", fieldKey: "sleeveLength", placeholder: "e.g. 65", type: "number", unit: sizingUnit }),
+        /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: "e.g. 80", type: "number", unit: sizingUnit }),
+        isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+          /* @__PURE__ */ jsx("label", { children: "Fit preference" }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-tryon-unit-btn${(formData.fitPreference || "standard") === fp ? " ps-active" : ""}`,
+              onClick: () => updateField("fitPreference", fp),
+              children: fp.charAt(0).toUpperCase() + fp.slice(1)
+            },
+            fp
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-shoe-section", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-shoe-title", children: "Shoe sizing (optional)" }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: sizingUnit === "in" ? "e.g. 10.5" : "e.g. 27", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: "Fill in what you know — more measurements = better accuracy." }),
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: handleSubmit, children: [
+        "Get My Size & Try On ",
+        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+      ] })
+    ] });
+  }
+  function ProcessingView() {
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
+      countdown > 0 ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
+          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-track", cx: "60", cy: "60", r: "52" }),
+          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${countdown / 25 * 326.73}` } })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ps-tryon-countdown-number", children: countdown })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-done-pulse", children: /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }) }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: countdown > 0 ? "Generating your try-on..." : "Almost there..." }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: countdown > 0 ? "This usually takes 15-25 seconds" : "Finishing up your look" })
+    ] });
+  }
+  function ResultView() {
+    const hasBoth = !!resultImageUrl && !!sizingResult;
+    const [profileName, setProfileName] = useState("");
+    return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
+      resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
+        sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-confidence", children: [
+            "Confidence: ",
+            /* @__PURE__ */ jsx("span", { className: `ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: sizingResult.reasoning }),
+          sizingResult.internationalSizes && /* @__PURE__ */ jsx("div", { className: "ps-tryon-intl-sizes", children: Object.entries(sizingResult.internationalSizes).map(([k, v]) => /* @__PURE__ */ jsxs("span", { className: "ps-tryon-intl-chip", children: [
+            k,
+            ": ",
+            v
+          ] }, k)) }),
+          sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-match-details", children: [
+            /* @__PURE__ */ jsx("summary", { children: "Measurement breakdown" }),
+            /* @__PURE__ */ jsxs("table", { children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { children: "Area" }),
+                /* @__PURE__ */ jsx("th", { children: "You" }),
+                /* @__PURE__ */ jsx("th", { children: "Chart" }),
+                /* @__PURE__ */ jsx("th", { children: "Fit" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("td", { children: m.measurement }),
+                /* @__PURE__ */ jsx("td", { children: m.userValue }),
+                /* @__PURE__ */ jsx("td", { children: m.chartRange }),
+                /* @__PURE__ */ jsx("td", { className: `ps-fit-${m.fit}`, children: m.fit })
+              ] }, i)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result-actions", cn.resultActions), children: [
+          /* @__PURE__ */ jsx("button", { onClick: handleDownload, className: cx("ps-tryon-btn-download", cn.downloadButton), children: "Download" }),
+          /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Try Another" })
+        ] }),
+        sizingMethod && !profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-prompt", children: [
+          /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Profile name (e.g. Me)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => {
+            if (profileName.trim()) saveProfile(profileName.trim());
+          }, children: "Save" })
+        ] }),
+        profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-done", children: [
+          /* @__PURE__ */ jsx(CheckIcon, {}),
+          " Profile saved"
+        ] })
+      ] })
+    ] });
+  }
+  function ErrorView() {
+    return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-error", cn.error), children: [
+      /* @__PURE__ */ jsx(AlertIcon, {}),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || "Something went wrong" }),
+      /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-submit", cn.submitButton), children: "Try Again" })
+    ] });
+  }
+  function DrawerPanel() {
+    if (!drawer) return null;
+    return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-drawer${drawer ? " ps-tryon-drawer-open" : ""}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-drawer-header", children: [
+        /* @__PURE__ */ jsx("button", { className: "ps-tryon-drawer-back", onClick: () => setDrawer(null), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "ps-tryon-drawer-title", children: drawer === "profiles" ? "My Profiles" : "History" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-list", children: drawer === "profiles" ? profiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: "No saved profiles yet." }) : profiles.map((p) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-item", onClick: () => {
+        setProfileDetail(p);
+        setDrawer(null);
+      }, children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-avatar", children: /* @__PURE__ */ jsx(UserIcon, { size: 20 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-info", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-name", children: p.name }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-detail", children: [
+            p.gender === "female" ? "Women's" : "Men's",
+            p.heightCm ? ` · ${Math.round(p.heightCm)}cm` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ] }, p.id)) : history.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: "No history yet." }) : history.map((entry, idx) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-item", children: [
+        entry.productImage && /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: "", className: "ps-tryon-history-thumb" }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-info", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-history-product", children: entry.productTitle || "Product" }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-meta", children: [
+            entry.profileName ? `${entry.profileName} · ` : "",
+            new Date(entry.date).toLocaleDateString()
+          ] }),
+          entry.recommendedSize && /* @__PURE__ */ jsx("div", { className: "ps-tryon-history-sizing", children: /* @__PURE__ */ jsx("span", { className: "ps-tryon-history-size-badge", children: entry.recommendedSize }) })
+        ] }),
+        entry.resultImageUrl && /* @__PURE__ */ jsx("img", { src: entry.resultImageUrl, alt: "", className: "ps-tryon-history-result-img" }),
+        /* @__PURE__ */ jsx("button", { className: "ps-tryon-history-delete", onClick: (e) => {
+          e.stopPropagation();
+          setHistory((prev) => prev.filter((_, i) => i !== idx));
+        }, children: /* @__PURE__ */ jsx(TrashIcon, {}) })
+      ] }, entry.id)) })
+    ] });
+  }
+  function ProfileDetailModal() {
+    if (!profileDetail) return null;
+    const p = profileDetail;
+    const measurements = [
+      { label: "Height", value: p.heightCm, unit: "cm" },
+      { label: "Weight", value: p.weightKg, unit: "kg" },
+      { label: "Chest", value: p.chest, unit: "cm" },
+      { label: "Bust", value: p.bust, unit: "cm" },
+      { label: "Waist", value: p.waist, unit: "cm" },
+      { label: "Hips", value: p.hips, unit: "cm" },
+      { label: "Shoulders", value: p.shoulderWidth, unit: "cm" },
+      { label: "Sleeve", value: p.sleeveLength, unit: "cm" },
+      { label: "Inseam", value: p.inseam, unit: "cm" },
+      { label: "Neck", value: p.neckCircumference, unit: "cm" },
+      { label: "Foot", value: p.footLengthCm, unit: "cm" },
+      { label: "Shoe EU", value: p.shoeEU ? Number(p.shoeEU) : void 0, unit: "" },
+      { label: "Shoe US", value: p.shoeUS ? Number(p.shoeUS) : void 0, unit: "" },
+      { label: "Shoe UK", value: p.shoeUK ? Number(p.shoeUK) : void 0, unit: "" }
+    ].filter((m) => m.value);
+    return /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-overlay", onClick: (e) => {
+      if (e.target === e.currentTarget) setProfileDetail(null);
+    }, children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-modal", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-header", children: [
+        /* @__PURE__ */ jsx("span", { children: p.name }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setProfileDetail(null), children: /* @__PURE__ */ jsx(XIcon, { size: 18 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-gender", children: [
+          /* @__PURE__ */ jsx(UserIcon, { size: 18 }),
+          " ",
+          p.gender === "female" ? "Women's" : "Men's",
+          " Profile"
+        ] }),
+        measurements.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-grid", children: measurements.map((m) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-cell-label", children: m.label }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell-value", children: [
+            Math.round(m.value),
+            m.unit ? ` ${m.unit}` : ""
+          ] })
+        ] }, m.label)) }),
+        p.createdAt && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-date", children: [
+          "Saved ",
+          new Date(p.createdAt).toLocaleDateString()
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-detail-delete", onClick: () => {
+          setProfiles((prev) => prev.filter((x) => x.id !== p.id));
+          if (activeProfileId === p.id) setActiveProfileId(null);
+          setProfileDetail(null);
+        }, children: [
+          /* @__PURE__ */ jsx(TrashIcon, {}),
+          " Delete Profile"
+        ] })
+      ] })
+    ] }) });
+  }
+  function renderBody() {
+    switch (view) {
+      case "welcome":
+        return /* @__PURE__ */ jsx(WelcomeView, {});
+      case "upload":
+        return /* @__PURE__ */ jsx(UploadView, {});
+      case "sizing-choice":
+        return /* @__PURE__ */ jsx(SizingChoiceView, {});
+      case "sizing-form":
+        return /* @__PURE__ */ jsx(SizingFormView, {});
+      case "processing":
+        return /* @__PURE__ */ jsx(ProcessingView, {});
+      case "result":
+        return /* @__PURE__ */ jsx(ResultView, {});
+      case "error":
+        return /* @__PURE__ */ jsx(ErrorView, {});
+      default:
+        return null;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { ...cssVars, ...style }, "data-ps-tryon": true, children: [
+    /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
+      /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
+      /* @__PURE__ */ jsx("span", { children: buttonText })
+    ] }),
+    view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), onClick: (e) => {
+      if (e.target === e.currentTarget) handleClose();
+    }, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
+        /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: "Virtual Try-On" }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
+          profiles.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: "Profiles", onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
+          history.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: "History", onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Stepper, {}),
+      /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: cx("ps-tryon-body", cn.body), style: { position: "relative", overflow: drawer ? "hidden" : void 0 }, children: [
+        renderBody(),
+        /* @__PURE__ */ jsx(DrawerPanel, {})
+      ] }),
+      showPoweredBy && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-powered", cn.poweredBy), children: [
+        "Powered by",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "https://myaifitting.com", target: "_blank", rel: "noopener noreferrer", children: "PrimeStyle AI" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ProfileDetailModal, {}),
+    /* @__PURE__ */ jsx("style", { children: STYLES })
+  ] });
+}
+const STYLES = `
+  .ps-tryon-root { display: inline-block; }
 
-        .ps-tryon-btn {
-          display: inline-flex;
-          align-items: center;
-          gap: 8px;
-          padding: var(--ps-btn-padding, 12px 24px);
-          background: var(--ps-btn-bg, #bb945c);
-          color: var(--ps-btn-color, #111211);
-          font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
-          font-size: var(--ps-btn-font-size, 14px);
-          font-weight: var(--ps-btn-font-weight, 600);
-          border: var(--ps-btn-border, none);
-          border-radius: var(--ps-btn-radius, 8px);
-          cursor: pointer;
-          transition: all 0.2s ease;
-          width: var(--ps-btn-width, auto);
-          height: var(--ps-btn-height, auto);
-          box-shadow: var(--ps-btn-shadow, none);
-          line-height: 1;
-          white-space: nowrap;
-        }
-        .ps-tryon-btn:hover {
-          background: var(--ps-btn-hover-bg, #a07d4e);
-          color: var(--ps-btn-hover-color, var(--ps-btn-color, #111211));
-          transform: translateY(-1px);
-        }
-        .ps-tryon-btn:active { transform: translateY(0); }
+  .ps-tryon-btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: var(--ps-btn-padding, 12px 24px);
+    background: var(--ps-btn-bg, #bb945c); color: var(--ps-btn-color, #111211);
+    font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
+    font-size: var(--ps-btn-font-size, 14px); font-weight: var(--ps-btn-font-weight, 600);
+    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 8px);
+    cursor: pointer; transition: all 0.2s ease;
+    width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);
+    box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;
+  }
+  .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, #a07d4e); transform: translateY(-1px); }
+  .ps-tryon-btn:active { transform: translateY(0); }
 
-        .ps-tryon-overlay {
-          position: fixed;
-          inset: 0;
-          background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 999999;
-          padding: 16px;
-          animation: ps-fade-in 0.2s ease;
-        }
-        @keyframes ps-fade-in {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
+  .ps-tryon-overlay {
+    position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
+    display: flex; align-items: center; justify-content: center;
+    z-index: 999999; padding: 16px; animation: ps-fade-in 0.2s ease;
+  }
+  @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }
 
-        .ps-tryon-modal {
-          background: var(--ps-modal-bg, #111211);
-          color: var(--ps-modal-color, #ffffff);
-          border-radius: var(--ps-modal-radius, 12px);
-          width: var(--ps-modal-width, 100%);
-          max-width: var(--ps-modal-max-width, 480px);
-          max-height: 90vh;
-          overflow-y: auto;
-          font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
-          box-shadow: 0 25px 50px rgba(0,0,0,0.4);
-          animation: ps-slide-up 0.25s ease;
-        }
-        @keyframes ps-slide-up {
-          from { transform: translateY(20px) scale(0.97); opacity: 0; }
-          to { transform: translateY(0) scale(1); opacity: 1; }
-        }
+  .ps-tryon-modal {
+    background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
+    border-radius: var(--ps-modal-radius, 16px); width: var(--ps-modal-width, 100%);
+    max-width: var(--ps-modal-max-width, 520px); max-height: 92vh; overflow-y: auto;
+    font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
+    box-shadow: 0 25px 50px rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
+    scrollbar-width: thin; scrollbar-color: #333 transparent;
+  }
+  .ps-tryon-modal-wide { max-width: 920px; }
+  @keyframes ps-slide-up { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
-        .ps-tryon-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 20px 24px;
-          background: var(--ps-modal-header-bg, #1a1b1a);
-          border-bottom: 1px solid #333;
-          border-radius: var(--ps-modal-radius, 12px) var(--ps-modal-radius, 12px) 0 0;
-        }
-        .ps-tryon-title {
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--ps-modal-header-color, #fff);
-        }
-        .ps-tryon-close {
-          width: 32px;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: none;
-          border: none;
-          color: var(--ps-modal-close-color, #999);
-          cursor: pointer;
-          border-radius: 6px;
-          transition: background 0.15s;
-        }
-        .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
+  /* Header */
+  .ps-tryon-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 24px; background: var(--ps-modal-header-bg, #1a1b1a);
+    border-bottom: 1px solid #333;
+    border-radius: var(--ps-modal-radius, 16px) var(--ps-modal-radius, 16px) 0 0;
+  }
+  .ps-tryon-title { font-size: 15px; font-weight: 600; color: var(--ps-modal-header-color, #fff); }
+  .ps-tryon-header-actions { display: flex; align-items: center; gap: 8px; }
+  .ps-tryon-header-icon {
+    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    cursor: pointer; color: #999; transition: all 0.2s;
+  }
+  .ps-tryon-header-icon:hover { border-color: #bb945c; color: #bb945c; }
+  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; }
+  .ps-tryon-close {
+    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
+    background: none; border: none; color: var(--ps-modal-close-color, #999);
+    cursor: pointer; border-radius: 6px; transition: background 0.15s;
+  }
+  .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
-        .ps-tryon-body { padding: 24px; }
+  /* Stepper */
+  .ps-tryon-stepper { padding: 20px 24px 12px; }
+  .ps-tryon-stepper-track { display: flex; align-items: flex-start; }
+  .ps-tryon-stepper-fragment { display: flex; align-items: flex-start; flex: 1; }
+  .ps-tryon-stepper-fragment:first-child { flex: 0 0 auto; }
+  .ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: 14px; transition: background 0.4s; }
+  .ps-tryon-stepper-line.ps-done { background: #bb945c; }
+  .ps-tryon-stepper-step { display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-stepper-circle {
+    width: 28px; height: 28px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    border: 2px solid #333; font-size: 12px; font-weight: 600; color: #666;
+    transition: all 0.3s;
+  }
+  .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle { background: #bb945c; border-color: #bb945c; color: #111; }
+  .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle svg { stroke: #111; }
+  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 4px rgba(187,148,92,0.15); }
+  .ps-tryon-stepper-label { font-size: 10px; margin-top: 5px; color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
+  .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-label { color: #bb945c; }
+  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-label { color: #bb945c; font-weight: 700; }
 
-        .ps-tryon-upload {
-          border: 2px dashed var(--ps-upload-border, #333);
-          border-radius: 12px;
-          padding: 40px 24px;
-          text-align: center;
-          cursor: pointer;
-          transition: all 0.2s;
-          background: var(--ps-upload-bg, transparent);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        .ps-tryon-upload:hover, .ps-tryon-drag-over {
-          border-color: #bb945c;
-          background: rgba(187,148,92,0.05);
-        }
-        .ps-tryon-upload svg {
-          color: var(--ps-upload-icon-color, #bb945c);
-          margin-bottom: 12px;
-        }
-        .ps-tryon-upload-text {
-          font-size: 14px;
-          color: var(--ps-upload-color, #fff);
-          margin: 0 0 4px;
-        }
-        .ps-tryon-upload-hint {
-          font-size: 12px;
-          color: #999;
-          margin: 0;
-        }
+  /* Body */
+  .ps-tryon-body { padding: 24px; min-height: 300px; }
+  .ps-tryon-body > * { animation: ps-fade-up 0.35s ease both; }
+  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 
-        .ps-tryon-preview {
-          position: relative;
-          margin-bottom: 4px;
-        }
-        .ps-tryon-preview img {
-          width: 100%;
-          border-radius: 12px;
-          display: block;
-        }
-        .ps-tryon-preview-remove {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          width: 28px;
-          height: 28px;
-          border-radius: 50%;
-          background: rgba(0,0,0,0.6);
-          border: none;
-          color: white;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 16px;
-          transition: background 0.15s;
-        }
-        .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
+  /* Welcome */
+  .ps-tryon-welcome { text-align: center; }
+  .ps-tryon-welcome-hero { margin-bottom: 20px; }
+  .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
+  .ps-tryon-welcome-product { width: 120px; height: 140px; object-fit: cover; border-radius: 14px; border: 2px solid #333; }
+  .ps-tryon-welcome-sparkle { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
+  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 14px; height: 14px; }
+  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+  .ps-tryon-welcome-title { font-size: 20px; font-weight: 700; color: #fff; margin: 14px 0 4px; }
+  .ps-tryon-welcome-sub { font-size: 13px; color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: 10px; margin: 20px 0; }
+  .ps-tryon-feature { flex: 1; padding: 14px 10px; border: 1px solid #333; border-radius: 12px; text-align: center; }
+  .ps-tryon-feature-icon { margin-bottom: 6px; color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
+  .ps-tryon-feature-title { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: 10px; color: #999; }
+  .ps-tryon-cta {
+    width: 100%; padding: 14px; background: #bb945c; color: #111; border: none;
+    border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
+    font-family: var(--ps-modal-font, system-ui, sans-serif);
+  }
+  .ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
+  .ps-tryon-cta svg { stroke: #111; }
+  .ps-tryon-welcome-note { font-size: 11px; color: #666; margin-top: 12px; }
 
-        .ps-tryon-submit {
-          width: 100%;
-          padding: 14px;
-          margin-top: 20px;
-          background: var(--ps-modal-primary-bg, #bb945c);
-          color: var(--ps-modal-primary-color, #111211);
-          font-family: var(--ps-modal-font, system-ui, sans-serif);
-          font-size: 14px;
-          font-weight: 600;
-          border: none;
-          border-radius: var(--ps-modal-primary-radius, 8px);
-          cursor: pointer;
-          transition: all 0.2s;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-        }
-        .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
-        .ps-tryon-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+  /* Upload */
+  .ps-tryon-upload {
+    border: 2px dashed var(--ps-upload-border, #333); border-radius: 12px;
+    padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s;
+    background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;
+  }
+  .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: #bb945c; background: rgba(187,148,92,0.05); }
+  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: 12px; }
+  .ps-tryon-upload-text { font-size: 14px; color: var(--ps-upload-color, #fff); margin: 0 0 4px; }
+  .ps-tryon-upload-hint { font-size: 12px; color: #999; margin: 0; }
+  .ps-tryon-preview { position: relative; margin-bottom: 4px; }
+  .ps-tryon-preview img { width: 100%; border-radius: 12px; display: block; }
+  .ps-tryon-preview-remove {
+    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
+    border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    font-size: 16px; transition: background 0.15s;
+  }
+  .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
+  .ps-tryon-submit {
+    width: 100%; padding: 14px; margin-top: 16px;
+    background: var(--ps-modal-primary-bg, #bb945c); color: var(--ps-modal-primary-color, #111);
+    font-family: var(--ps-modal-font, system-ui, sans-serif);
+    font-size: 14px; font-weight: 600; border: none;
+    border-radius: var(--ps-modal-primary-radius, 10px);
+    cursor: pointer; transition: all 0.2s;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+  }
+  .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
+  .ps-tryon-submit svg { stroke: currentColor; }
 
-        .ps-tryon-processing {
-          text-align: center;
-          padding: 40px 24px;
-        }
-        .ps-tryon-spinner {
-          width: 48px;
-          height: 48px;
-          border: 3px solid #333;
-          border-top-color: var(--ps-loader, #bb945c);
-          border-radius: 50%;
-          animation: ps-spin 0.8s linear infinite;
-          margin: 0 auto 16px;
-        }
-        @keyframes ps-spin { to { transform: rotate(360deg); } }
+  /* Profile bar */
+  .ps-tryon-profile-bar { margin-bottom: 16px; }
+  .ps-tryon-profile-select {
+    width: 100%; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
+    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 14px center;
+  }
+  .ps-tryon-profile-select:focus { border-color: #bb945c; }
 
-        .ps-tryon-countdown-ring {
-          position: relative;
-          width: 100px;
-          height: 100px;
-          margin: 0 auto 20px;
-        }
-        .ps-tryon-countdown-ring svg {
-          width: 100%;
-          height: 100%;
-          transform: rotate(-90deg);
-        }
-        .ps-tryon-countdown-track {
-          fill: none;
-          stroke: #333;
-          stroke-width: 4;
-        }
-        .ps-tryon-countdown-progress {
-          fill: none;
-          stroke: var(--ps-loader, #bb945c);
-          stroke-width: 4;
-          stroke-linecap: round;
-          stroke-dasharray: 326.73;
-          transition: stroke-dashoffset 1s linear;
-        }
-        .ps-tryon-countdown-number {
-          position: absolute;
-          inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 28px;
-          font-weight: 700;
-          color: #fff;
-          font-variant-numeric: tabular-nums;
-        }
+  /* Sizing choice */
+  .ps-tryon-sizing-choice { text-align: center; }
+  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 20px; }
+  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 12px; }
+  .ps-tryon-choice-card {
+    padding: 20px; border: 1.5px solid #333; border-radius: 14px;
+    background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
+    display: block; width: 100%; font-family: inherit;
+  }
+  .ps-tryon-choice-card:hover { border-color: #bb945c; box-shadow: 0 4px 20px rgba(187,148,92,0.08); }
+  .ps-tryon-choice-icon { color: #bb945c; margin-bottom: 8px; }
+  .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
+  .ps-tryon-choice-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
+  .ps-tryon-choice-desc { font-size: 12px; color: #999; }
+  .ps-tryon-choice-badge {
+    display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px;
+    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 11px; font-weight: 600;
+  }
+  .ps-tryon-skip-btn {
+    margin-top: 16px; padding: 10px; background: none; border: 1px solid #333;
+    border-radius: 10px; color: #999; font-size: 13px; cursor: pointer; transition: all 0.2s;
+    width: 100%; font-family: inherit;
+  }
+  .ps-tryon-skip-btn:hover { border-color: #666; color: #ccc; }
 
-        .ps-tryon-done-pulse {
-          animation: ps-fade-scale-in 0.4s ease both;
-          margin-bottom: 4px;
-        }
-        @keyframes ps-fade-scale-in {
-          from { opacity: 0; transform: scale(0.8); }
-          to { opacity: 1; transform: scale(1); }
-        }
+  /* Sizing form */
+  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
+  .ps-tryon-input-row { display: flex; align-items: center; gap: 10px; }
+  .ps-tryon-input-row label { font-size: 13px; font-weight: 500; color: #ccc; min-width: 90px; flex-shrink: 0; }
+  .ps-tryon-input-row input {
+    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
+    background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none;
+    transition: border-color 0.2s; -moz-appearance: textfield;
+  }
+  .ps-tryon-input-row input::-webkit-outer-spin-button,
+  .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-input-row input:focus { border-color: #bb945c; }
+  .ps-tryon-input-unit { font-size: 12px; color: #666; flex-shrink: 0; }
+  .ps-tryon-dual-input { gap: 8px; }
+  .ps-tryon-dual-input input { width: 50%; }
+  .ps-tryon-country-select {
+    flex: 1; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
+    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 14px center;
+  }
+  .ps-tryon-country-select:focus { border-color: #bb945c; }
+  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: 8px; overflow: hidden; }
+  .ps-tryon-unit-btn {
+    padding: 6px 14px; background: transparent; border: none; color: #999;
+    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
+  }
+  .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
+  .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
+  .ps-tryon-shoe-title { font-size: 13px; font-weight: 600; color: #999; }
+  .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
 
-        .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
-        .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
+  /* Processing */
+  .ps-tryon-processing { text-align: center; padding: 40px 24px; }
+  .ps-tryon-spinner {
+    width: 48px; height: 48px; border: 3px solid #333;
+    border-top-color: var(--ps-loader, #bb945c); border-radius: 50%;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto 16px;
+  }
+  @keyframes ps-spin { to { transform: rotate(360deg); } }
+  .ps-tryon-countdown-ring { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
+  .ps-tryon-countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+  .ps-tryon-countdown-track { fill: none; stroke: #333; stroke-width: 4; }
+  .ps-tryon-countdown-progress { fill: none; stroke: var(--ps-loader, #bb945c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 326.73; transition: stroke-dashoffset 1s linear; }
+  .ps-tryon-countdown-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
+  .ps-tryon-done-pulse { animation: ps-scale-in 0.4s ease both; }
+  @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
+  .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
+  .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
 
-        .ps-tryon-result { text-align: center; }
-        .ps-tryon-result img {
-          width: 100%;
-          border-radius: var(--ps-result-radius, 12px);
-          display: block;
-          margin-bottom: 16px;
-        }
-        .ps-tryon-result-actions { display: flex; gap: 8px; }
-        .ps-tryon-result-actions button {
-          flex: 1;
-          padding: 12px;
-          font-family: var(--ps-modal-font, system-ui, sans-serif);
-          font-size: 13px;
-          font-weight: 600;
-          border-radius: 8px;
-          cursor: pointer;
-          transition: all 0.2s;
-          border: none;
-        }
-        .ps-tryon-btn-download { background: #bb945c; color: #111211; }
-        .ps-tryon-btn-download:hover { opacity: 0.9; }
-        .ps-tryon-btn-retry {
-          background: rgba(255,255,255,0.1);
-          color: #fff;
-          border: 1px solid #333 !important;
-        }
-        .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.15); }
+  /* Result */
+  .ps-tryon-result-layout { text-align: center; }
+  .ps-tryon-result-split { display: flex; gap: 24px; text-align: left; align-items: stretch; }
+  .ps-tryon-result-image-col { flex: 0 0 45%; min-width: 0; display: flex; align-items: center; justify-content: center; }
+  .ps-tryon-result-image-col img { width: 100%; max-height: 400px; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
+  .ps-tryon-result-info-col { flex: 1; min-width: 0; }
+  .ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
+  .ps-tryon-result-actions { display: flex; gap: 8px; margin-top: 16px; }
+  .ps-tryon-result-actions button {
+    flex: 1; padding: 12px; font-family: var(--ps-modal-font, system-ui, sans-serif);
+    font-size: 13px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; border: none;
+  }
+  .ps-tryon-btn-download { background: #bb945c; color: #111; }
+  .ps-tryon-btn-download:hover { opacity: 0.9; }
+  .ps-tryon-btn-retry { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid #333 !important; }
+  .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
 
-        .ps-tryon-error {
-          text-align: center;
-          padding: 24px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        .ps-tryon-error svg { color: #ef4444; margin-bottom: 12px; }
-        .ps-tryon-error-text { font-size: 14px; color: #ef4444; margin: 0 0 16px; }
+  /* Size recommendation */
+  .ps-tryon-size-recommend { margin-bottom: 16px; }
+  .ps-tryon-size-badge {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 56px; height: 56px; border-radius: 50%;
+    background: linear-gradient(135deg, #bb945c, #d6ba7d);
+    color: #111; font-size: 20px; font-weight: 700; margin-bottom: 10px;
+  }
+  .ps-tryon-size-confidence { font-size: 12px; color: #999; margin-bottom: 8px; }
+  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
+  .ps-tryon-size-reasoning { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 12px; }
+  .ps-tryon-intl-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+  .ps-tryon-intl-chip { padding: 4px 10px; border: 1px solid #333; border-radius: 8px; font-size: 11px; color: #ccc; font-weight: 500; }
+  .ps-tryon-match-details { margin-top: 12px; }
+  .ps-tryon-match-details summary { font-size: 12px; color: #bb945c; cursor: pointer; font-weight: 600; }
+  .ps-tryon-match-details table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
+  .ps-tryon-match-details th { text-align: left; padding: 6px 8px; border-bottom: 1px solid #333; color: #999; font-weight: 600; }
+  .ps-tryon-match-details td { padding: 6px 8px; border-bottom: 1px solid #222; color: #ccc; }
+  .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
 
-        .ps-tryon-powered {
-          text-align: center;
-          padding: 12px 24px 16px;
-          font-size: 11px;
-          color: #999;
-        }
-        .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
-        .ps-tryon-powered a:hover { text-decoration: underline; }
-      ` })
-      ]
-    }
-  );
-}
+  /* Save profile prompt */
+  .ps-tryon-save-prompt { display: flex; gap: 8px; margin-top: 14px; }
+  .ps-tryon-save-prompt input {
+    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
+    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+  }
+  .ps-tryon-save-prompt input:focus { border-color: #bb945c; }
+  .ps-tryon-save-prompt button {
+    padding: 10px 20px; background: #bb945c; color: #111; border: none; border-radius: 10px;
+    font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
+  }
+  .ps-tryon-save-prompt button:hover { opacity: 0.9; }
+  .ps-tryon-save-done { font-size: 12px; color: #4ade80; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
+  .ps-tryon-save-done svg { stroke: currentColor; }
+
+  /* Error */
+  .ps-tryon-error { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-error svg { color: #ef4444; margin-bottom: 12px; }
+  .ps-tryon-error-text { font-size: 14px; color: #ef4444; margin: 0 0 16px; }
+
+  /* Footer */
+  .ps-tryon-powered { text-align: center; padding: 12px 24px 16px; font-size: 11px; color: #666; }
+  .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
+  .ps-tryon-powered a:hover { text-decoration: underline; }
+
+  /* Drawer */
+  .ps-tryon-drawer {
+    position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
+    overflow-y: auto; scrollbar-width: thin; padding: 20px 24px;
+    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+  }
+  .ps-tryon-drawer-open { transform: translateX(0); }
+  .ps-tryon-drawer-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #333; }
+  .ps-tryon-drawer-back {
+    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    cursor: pointer; color: #999; transition: all 0.2s; flex-shrink: 0;
+  }
+  .ps-tryon-drawer-back:hover { border-color: #bb945c; color: #bb945c; }
+  .ps-tryon-drawer-title { font-size: 16px; font-weight: 600; color: #fff; }
+  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 8px; }
+  .ps-tryon-drawer-empty { text-align: center; padding: 32px 16px; color: #666; font-size: 14px; }
+
+  /* Profile items */
+  .ps-tryon-profile-item {
+    display: flex; align-items: center; gap: 12px; padding: 14px;
+    border: 1px solid #333; border-radius: 12px; cursor: pointer; transition: all 0.2s;
+  }
+  .ps-tryon-profile-item:hover { border-color: #bb945c; }
+  .ps-tryon-profile-avatar {
+    width: 40px; height: 40px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(187,148,92,0.1); flex-shrink: 0;
+  }
+  .ps-tryon-profile-avatar svg { stroke: #bb945c; fill: none; }
+  .ps-tryon-profile-info { flex: 1; min-width: 0; }
+  .ps-tryon-profile-name { font-size: 14px; font-weight: 600; color: #fff; }
+  .ps-tryon-profile-detail { font-size: 11px; color: #999; margin-top: 2px; }
+  .ps-tryon-profile-item > svg:last-child { color: #666; flex-shrink: 0; transition: color 0.2s; }
+  .ps-tryon-profile-item:hover > svg:last-child { color: #bb945c; }
+
+  /* History items */
+  .ps-tryon-history-item {
+    display: flex; gap: 10px; padding: 12px;
+    border: 1px solid #333; border-radius: 12px; align-items: center; transition: all 0.2s;
+  }
+  .ps-tryon-history-item:hover { border-color: #bb945c; }
+  .ps-tryon-history-thumb { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+  .ps-tryon-history-info { flex: 1; min-width: 0; }
+  .ps-tryon-history-product { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ps-tryon-history-meta { font-size: 11px; color: #666; margin-top: 3px; }
+  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+  .ps-tryon-history-size-badge {
+    width: 28px; height: 28px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #bb945c, #d6ba7d);
+    color: #111; font-size: 11px; font-weight: 700; flex-shrink: 0;
+  }
+  .ps-tryon-history-result-img { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1.5px solid #bb945c; }
+  .ps-tryon-history-delete {
+    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
+    border: none; background: transparent; cursor: pointer; color: #666; border-radius: 6px; transition: all 0.2s; flex-shrink: 0;
+  }
+  .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
+  .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }
+
+  /* Profile detail modal */
+  .ps-tryon-detail-overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 9999999; padding: 16px; animation: ps-fade-in 0.2s ease;
+  }
+  .ps-tryon-detail-modal {
+    background: #111211; border-radius: 16px; width: 100%; max-width: 440px; max-height: 85vh;
+    overflow-y: auto; box-shadow: 0 32px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
+    font-family: var(--ps-modal-font, system-ui, sans-serif); color: #fff;
+  }
+  .ps-tryon-detail-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 24px; border-bottom: 1px solid #333;
+  }
+  .ps-tryon-detail-header span { font-size: 15px; font-weight: 600; }
+  .ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: 6px; padding: 4px; transition: background 0.15s; }
+  .ps-tryon-detail-header button:hover { background: rgba(255,255,255,0.1); }
+  .ps-tryon-detail-body { padding: 20px 24px; }
+  .ps-tryon-detail-gender { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid #333; margin-bottom: 14px; }
+  .ps-tryon-detail-gender svg { stroke: #bb945c; fill: none; }
+  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
+  .ps-tryon-detail-cell { background: #1a1b1a; border-radius: 10px; padding: 12px 14px; }
+  .ps-tryon-detail-cell-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
+  .ps-tryon-detail-cell-value { font-size: 16px; font-weight: 600; color: #fff; }
+  .ps-tryon-detail-date { font-size: 11px; color: #666; text-align: center; margin-top: 8px; }
+  .ps-tryon-detail-delete {
+    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
+    padding: 12px; border: 1px solid #333; border-radius: 10px; background: none;
+    color: #ef4444; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
+    font-family: inherit; margin-top: 16px;
+  }
+  .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; }
+  .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }
+
+  /* Mobile responsive */
+  @media (max-width: 720px) {
+    .ps-tryon-result-split { flex-direction: column; }
+    .ps-tryon-result-image-col { flex: none; }
+    .ps-tryon-modal-wide { max-width: 520px; }
+  }
+  @media (max-width: 480px) {
+    .ps-tryon-modal { max-height: 100vh; border-radius: 14px; }
+    .ps-tryon-body { padding: 18px; }
+    .ps-tryon-header { padding: 14px 18px; }
+    .ps-tryon-stepper { padding: 14px 18px 8px; }
+    .ps-tryon-stepper-circle { width: 24px; height: 24px; font-size: 10px; }
+    .ps-tryon-stepper-label { font-size: 9px; }
+    .ps-tryon-features { flex-direction: column; gap: 8px; }
+    .ps-tryon-feature { flex-direction: row; gap: 10px; text-align: left; }
+    .ps-tryon-feature-icon { margin-bottom: 0; }
+    .ps-tryon-input-row { flex-wrap: wrap; }
+    .ps-tryon-input-row label { min-width: 100%; margin-bottom: -4px; }
+    .ps-tryon-drawer { padding: 16px; }
+    .ps-tryon-detail-grid { gap: 8px; }
+    .ps-tryon-detail-cell { padding: 10px 12px; }
+    .ps-tryon-detail-cell-value { font-size: 14px; }
+    .ps-tryon-detail-modal { max-width: 100%; }
+    .ps-tryon-header-icon { width: 30px; height: 30px; border-radius: 8px; }
+  }
+`;
 export {
   PrimeStyleTryon
 };