@primestyleai/tryon 5.8.58 → 5.9.1

package/dist/storefront/primestyle-tryon.js

@@ -9296,9 +9296,10 @@ class ApiClient {
       Authorization: `Bearer ${this.apiKey}`
     };
   }
-  async submitTryOn(modelImage, garmentImage, fitInfo) {
+  async submitTryOn(modelImage, garmentImage, fitInfo, category) {
     const body = { modelImage, garmentImage };
     if (fitInfo && fitInfo.length > 0) body.fitInfo = fitInfo;
+    if (category && category !== "apparel") body.category = category;
     const res = await fetch(`${this.baseUrl}/api/v1/tryon`, {
       method: "POST",
       headers: this.headers,
@@ -10912,12 +10913,22 @@ const STYLES$1 = `
   }
   .ps-tryon-v2-processing-label {
     position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);
-    z-index: 5; font-size: 0.65vw; font-weight: 500;
-    color: var(--ps-accent); letter-spacing: 0.06em;
-    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
-    padding: 0.25vw 0.8vw; border-radius: 2vw;
+    z-index: 5; font-size: 0.7vw; font-weight: 600;
+    color: #fff; letter-spacing: 0.05em;
+    background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);
+    padding: 0.6vw 0.9vw; border-radius: 0.6vw;
+    display: flex; flex-direction: column; align-items: center; gap: 0.5vw;
+    min-width: 14vw;
+    box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.35);
+  }
+  .ps-tryon-v2-processing-label > span:first-child {
     animation: ps-loading-pulse 2s ease-in-out infinite;
   }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-ring-track { stroke: rgba(255,255,255,0.18); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-ring-fill  { stroke: var(--ps-accent-light); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-eta        { color: #fff; }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-bar-wrap   { background: rgba(255,255,255,0.18); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-pct        { color: var(--ps-accent-light); }
 
   /* "I don't know" link */
   .ps-tryon-v2-dontknow {
@@ -11508,22 +11519,81 @@ const STYLES$1 = `
   }
 
   .ps-tryon-progress-section {
-    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 15.6vw; margin-bottom: 0.83vw;
+    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 18vw; margin-bottom: 0.83vw;
+  }
+  /* Shared progress layout used inside StageCycler (desktop) and
+     MobileScanningView — row of ring + bar + percent, same tokens. */
+  .ps-tryon-progress-wrap {
+    display: flex; align-items: center; gap: 10px;
+    width: 100%; max-width: 320px; margin-top: 16px;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {
+    flex: 1; height: 4px; border-radius: 3px; overflow: hidden;
+    position: relative; background: var(--ps-border-color);
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-bar-fill {
+    height: 100%; width: 0%;
+    background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));
+    border-radius: 3px; transition: width 0.3s ease;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-pct {
+    font-size: 11px; font-weight: 700; color: var(--ps-accent);
+    min-width: 30px; text-align: right;
+    font-variant-numeric: tabular-nums;
   }
   .ps-tryon-progress-bar-wrap {
     flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;
+    position: relative;
+  }
+  .ps-tryon-progress-bar-wrap::after {
+    content: ""; position: absolute; inset: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
+    transform: translateX(-100%);
+    animation: ps-progress-shimmer 2s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes ps-progress-shimmer {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
   }
   .ps-tryon-progress-bar-fill {
     height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));
     border-radius: 3px; transition: width 0.3s ease; width: 0%;
+    position: relative; z-index: 1;
   }
   .ps-tryon-progress-pct {
     font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
+  /* Circular ETA ring — 48×48 px SVG with a track + progress circle; ETA
+     text centered. strokeDashoffset is driven by the ticker in
+     PrimeStyleTryonInner, so CSS only styles the appearance. */
+  .ps-tryon-progress-ring {
+    position: relative; width: 48px; height: 48px; flex: 0 0 48px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-tryon-progress-ring svg { transform: rotate(-90deg); }
+  .ps-tryon-progress-ring-track {
+    fill: none; stroke: var(--ps-border-color); stroke-width: 3.5;
+  }
+  .ps-tryon-progress-ring-fill {
+    fill: none; stroke: var(--ps-accent); stroke-width: 3.5;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+  .ps-tryon-progress-eta {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    font-size: 10px; font-weight: 700; color: var(--ps-accent);
+    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
+    pointer-events: none;
+  }
+
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
-  .ps-tryon-processing-text { font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw; }
+  .ps-tryon-processing-text {
+    font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw;
+    opacity: 1; transition: opacity 0.18s ease;
+  }
   .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }
 
   /* Result — split layout */
@@ -16836,17 +16906,71 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
     }
   );
 }
+const MSC_TRYON_TARGET_SECONDS = 22;
+const MSC_RING_RADIUS = 20;
+const MSC_RING_CIRC = 2 * Math.PI * MSC_RING_RADIUS;
+function MscTryOnProgress({ t: t2 }) {
+  const startRef = reactExports.useRef(Date.now());
+  const ringRef = reactExports.useRef(null);
+  const barRef = reactExports.useRef(null);
+  const etaRef = reactExports.useRef(null);
+  const pctRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    startRef.current = Date.now();
+    const id2 = setInterval(() => {
+      const elapsed = (Date.now() - startRef.current) / 1e3;
+      const pct = Math.min(95, elapsed / MSC_TRYON_TARGET_SECONDS * 100);
+      const val = Math.round(pct);
+      if (barRef.current) barRef.current.style.width = `${val}%`;
+      if (pctRef.current) pctRef.current.textContent = `${val}%`;
+      if (ringRef.current) ringRef.current.style.strokeDashoffset = String(MSC_RING_CIRC * (1 - pct / 100));
+      if (etaRef.current) {
+        const remaining = Math.max(0, MSC_TRYON_TARGET_SECONDS - Math.floor(elapsed));
+        etaRef.current.textContent = elapsed >= MSC_TRYON_TARGET_SECONDS ? t2("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id2);
+  }, [t2]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "24", cy: "24", r: MSC_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "24",
+            cy: "24",
+            r: MSC_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: MSC_RING_CIRC,
+            strokeDashoffset: MSC_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${MSC_TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function MobileScanningView({
   previewUrl,
   productImage,
   bodyLandmarks,
   sizingDone,
+  tryOnProcessing,
   onSwitchToManual,
   t: t2
 }) {
   const displayImage = previewUrl || productImage || "";
   const isPhotoMode = !!previewUrl;
-  const stages = isPhotoMode ? [
+  const stages = tryOnProcessing ? [
+    { title: t2("GENERATING TRY-ON"), desc: t2("Rendering the garment on your photo."), viewfinderText: t2("GENERATING") },
+    { title: t2("REFINING DETAILS"), desc: t2("Fine-tuning fit, drape and shadows."), viewfinderText: t2("REFINING") },
+    { title: t2("ALMOST THERE"), desc: t2("Final compositing in progress."), viewfinderText: t2("COMPOSITING") },
+    { title: t2("FINISHING TOUCHES"), desc: t2("Polishing the result."), viewfinderText: t2("FINISHING") }
+  ] : isPhotoMode ? [
     { title: t2("DETECTING POSE"), desc: t2("Identifying body landmarks from your photo."), viewfinderText: t2("DETECTING POSE") },
     { title: t2("SCANNING FRAME"), desc: t2("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t2("SCANNING FRAME") },
     { title: t2("ANALYZING BODY"), desc: t2("Measuring shoulders, chest, waist and hips."), viewfinderText: t2("ANALYZING") },
@@ -16889,10 +17013,13 @@ function MobileScanningView({
       ),
       isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-    ] }, stageIdx) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+      ] }, stageIdx),
+      tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(MscTryOnProgress, { t: t2 })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       MobileBottomTabs,
@@ -17090,6 +17217,62 @@ const SKELETON_CONNECTIONS = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+const TRYON_TARGET_SECONDS = 22;
+const TRYON_RING_RADIUS = 20;
+const TRYON_RING_CIRC = 2 * Math.PI * TRYON_RING_RADIUS;
+function TryOnProgress({ t: t2, isActive }) {
+  const startRef = reactExports.useRef(null);
+  const ringRef = reactExports.useRef(null);
+  const barRef = reactExports.useRef(null);
+  const etaRef = reactExports.useRef(null);
+  const pctRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!isActive) {
+      startRef.current = null;
+      return;
+    }
+    startRef.current = Date.now();
+    const id2 = setInterval(() => {
+      const start = startRef.current || Date.now();
+      const elapsed = (Date.now() - start) / 1e3;
+      const pct = Math.min(95, elapsed / TRYON_TARGET_SECONDS * 100);
+      const val = Math.round(pct);
+      if (barRef.current) barRef.current.style.width = `${val}%`;
+      if (pctRef.current) pctRef.current.textContent = `${val}%`;
+      if (ringRef.current) {
+        ringRef.current.style.strokeDashoffset = String(TRYON_RING_CIRC * (1 - pct / 100));
+      }
+      if (etaRef.current) {
+        const remaining = Math.max(0, TRYON_TARGET_SECONDS - Math.floor(elapsed));
+        etaRef.current.textContent = elapsed >= TRYON_TARGET_SECONDS ? t2("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id2);
+  }, [isActive, t2]);
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "24", cy: "24", r: TRYON_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "24",
+            cy: "24",
+            r: TRYON_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: TRYON_RING_CIRC,
+            strokeDashoffset: TRYON_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function FaceOverlay({
   landmarks,
   imgWidth,
@@ -17233,10 +17416,13 @@ function StageCycler({
     return () => clearInterval(id2);
   }, [isDone, active.length]);
   const current = active[idx] ?? active[0];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`),
+    tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnProgress, { t: t2, isActive: !!tryOnProcessing })
+  ] });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
@@ -18374,6 +18560,7 @@ function SizeResultView({
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
   const isMobile = useIsMobile();
   const isAccessory = measurementType === "face" || measurementType === "head";
+  const vtoExcluded = measurementType === "foot";
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
     isSnapProcessing,
@@ -18411,6 +18598,7 @@ function SizeResultView({
         previewUrl,
         bodyLandmarks: bodyLandmarks ?? null,
         sizingDone,
+        tryOnProcessing,
         onSwitchToManual: () => setView("body-profile"),
         t: t2
       }
@@ -18467,7 +18655,7 @@ function SizeResultView({
                 isMobile: true,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MeasurementOverlay,
@@ -18541,7 +18729,7 @@ function SizeResultView({
             },
             onClose,
             showLines,
-            onToggleLines: () => setShowLines(!showLines),
+            onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
             onImageLoad: handleImgLoad,
             overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               MeasurementOverlay,
@@ -18576,7 +18764,10 @@ function SizeResultView({
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
             tryOnProcessing && bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }),
-            tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-v2-processing-label", children: t2("Generating try-on...") }),
+            tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-processing-label", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating try-on...") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnProgress, { t: t2, isActive: true })
+            ] }),
             resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (() => {
               const all = [...sizingResult?.matchDetails || []];
               if (sizingResult?.sections) {
@@ -18593,7 +18784,7 @@ function SizeResultView({
               }).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit }));
             })(), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
             resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
+              !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginRight: "0.3vw" }, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
@@ -18647,7 +18838,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : isAccessory ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              ) : vtoExcluded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -18707,7 +18898,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -18716,7 +18907,7 @@ function SizeResultView({
                 renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MeasurementOverlay,
@@ -18737,7 +18928,7 @@ function SizeResultView({
               /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
               resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
               resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
+                !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t2("Download") })
               ] })
             ] }),
@@ -18754,7 +18945,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t: t2,
@@ -18764,14 +18955,14 @@ function SizeResultView({
           ] });
         })()
       ),
-      showPhotoGuide && !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
+      showPhotoGuide && !vtoExcluded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
         /* ── Mobile: same layout as the AI-sizing photo step
            (PhotoStepMobile) — title + subtitle, large preview,
            checklist card, primary CTA + RETAKE secondary. ── */
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-wrapper", style: { padding: "16px 16px 0", background: "var(--ps-bg-primary)" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-root", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-header", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-pm-title", children: t2("Review your photo") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-subtitle", children: t2("Ensure your full body is visible for the most accurate virtual try-on.") })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-subtitle", children: measurementType === "face" ? t2("A clear, front-facing face photo — no glasses on — gives us the most accurate try-on.") : measurementType === "head" ? t2("Face the camera with your head and shoulders in frame, leaving space above your head.") : t2("Ensure your full body is visible for the most accurate virtual try-on.") })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
@@ -18822,11 +19013,19 @@ function SizeResultView({
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist-body", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-title", children: t2("Checklist for accuracy") }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "ps-pm-checklist-items", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "ps-pm-checklist-items", children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Face the camera directly at eye level") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Remove any glasses you're wearing") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Head and shoulders in frame") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Leave space above your head") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Form-fitting clothing is recommended") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Standing 2-3 meters from camera") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Neutral background with good lighting") })
-              ] })
+              ] }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
@@ -18906,7 +19105,7 @@ function SizeResultView({
                 ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t2("Upload your photo") }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t2("Click or drag a full-body photo") })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: measurementType === "face" ? t2("Click or drag a close-up face photo") : measurementType === "head" ? t2("Click or drag a head-and-shoulders photo") : t2("Click or drag a full-body photo") })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "input",
@@ -18931,7 +19130,23 @@ function SizeResultView({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Do") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Face the camera directly, centered in frame"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Use natural, even lighting (e.g. near a window)"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Keep hair away from your face and ears"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Choose a plain, light background")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Face the camera with head and shoulders in frame"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Leave some space above your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Use natural, even lighting"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Choose a plain, light background")
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 t2("Stand facing the camera with your full body in frame"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Use natural or even lighting"),
@@ -18939,14 +19154,30 @@ function SizeResultView({
                 t2("Wear fitted, simple clothing"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Stand straight and still, arms relaxed")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Don't") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Don't wear sunglasses or a hat in the photo"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't tilt or turn your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't apply filters or edits")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Don't wear a hat in the photo"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't crop out the top of your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't apply filters or edits")
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 t2("Don't wear loose or baggy clothing"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Don't sit, pose, or bend"),
@@ -18954,14 +19185,14 @@ function SizeResultView({
                 t2("Don't take mirror photos or selfies"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Don't apply filters or edits")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "rgba(59,130,246,0.08)", border: "1px solid rgba(59,130,246,0.2)", borderRadius: "0.5vw", padding: "0.5vw 0.8vw" }, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(SparkleIcon, { size: 12 }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-accent)", fontSize: "0.65vw", fontWeight: 700 }, children: t2("Pro Tip") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: t2("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: measurementType === "face" ? t2("A clear, well-lit face photo gives the most accurate eyewear try-on.") : measurementType === "head" ? t2("A clear head-and-shoulders photo with space above your head gives the most accurate headwear try-on.") : t2("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
             ] })
           ] })
         ] }),
@@ -19090,12 +19321,16 @@ function UploadView({
     }
   ) });
 }
+const RING_RADIUS = 20;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
   progressRef,
   progressBarRef,
   progressTextRef,
   progressStatusRef,
+  progressEtaRef,
+  progressRingRef,
   cn,
   t: t2
 }) {
@@ -19110,6 +19345,16 @@ function ProcessingView({
   const statusCb = reactExports.useCallback((el2) => {
     progressStatusRef.current = el2;
   }, []);
+  const etaCb = reactExports.useCallback((el2) => {
+    progressEtaRef.current = el2;
+  }, []);
+  const ringCb = reactExports.useCallback((el2) => {
+    progressRingRef.current = el2;
+    if (el2) {
+      const offset = RING_CIRCUMFERENCE * (1 - Math.round(progressRef.current) / 100);
+      el2.style.strokeDashoffset = String(offset);
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
       previewUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -19120,6 +19365,32 @@ function ProcessingView({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-section", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-track"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "circle",
+            {
+              ref: ringCb,
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-fill",
+              strokeDasharray: RING_CIRCUMFERENCE,
+              strokeDashoffset: RING_CIRCUMFERENCE
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaCb, className: "ps-tryon-progress-eta", children: `~22s` })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
     ] }),
@@ -20785,12 +21056,13 @@ function PhotoStepMobile({
   photoVariant = "full-body",
   photoStepHeight,
   onPhotoStepHeightChange,
+  ageConfirmed,
+  onAgeConfirmedChange,
   t: t2
 }) {
   const isCloseUp = photoVariant === "close-up";
   const fileRef = reactExports.useRef(null);
   const hasPhoto = !!photoPreview;
-  const [ageConfirmed, setAgeConfirmed] = reactExports.useState(null);
   const gated = !hasPhoto && ageConfirmed !== true;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-root", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-header", children: [
@@ -20842,14 +21114,14 @@ function PhotoStepMobile({
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-eyebrow", children: t2("AGE VERIFICATION") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-question", children: t2("Is the person in this photo 18 years or older?") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-actions", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t2("Yes") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t2("No") })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => onAgeConfirmedChange(true), children: t2("Yes") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(false), children: t2("No") })
         ] })
       ] }) }),
       ageConfirmed === false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate", role: "alert", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-card", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-eyebrow ps-pm-age-gate-eyebrow-blocked", children: t2("UPLOAD NOT ALLOWED") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-question", children: t2("For your safety, we cannot process photos of people under 18.") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(null), children: t2("Go back") })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(null), children: t2("Go back") })
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-legal-notice", children: [
@@ -21317,6 +21589,11 @@ function BodyProfileView({
           error,
           photoStepHeight,
           onPhotoStepHeightChange: setPhotoStepHeight,
+          ageConfirmed,
+          onAgeConfirmedChange: (v2) => {
+            setAgeConfirmed(v2);
+            if (v2 === true) setError("");
+          },
           t: t2
         }
       ) });
@@ -22063,6 +22340,11 @@ function AccessorySizeView({
         onSwitchToManual: () => setStep("manual"),
         error,
         photoVariant,
+        ageConfirmed,
+        onAgeConfirmedChange: (v2) => {
+          setAgeConfirmed(v2);
+          if (v2 === true) setError("");
+        },
         t: t2
       }
     ) });
@@ -22620,6 +22902,12 @@ function detectMeasurementType(title) {
   if (/\b(sunglass|sunglasses|eyewear|eyeglasses|glasses|spectacles|optical|goggles|frames|aviator|wayfarer|lens)\b/.test(t2)) return "face";
   return "body";
 }
+function measurementTypeToVtoCategory(type) {
+  if (type === "face") return "sunglasses";
+  if (type === "head") return "hat";
+  if (type === "body") return "apparel";
+  return null;
+}
 function PrimeStyleTryonInner({
   productImage,
   productTitle = "Product",
@@ -22725,15 +23013,22 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const TARGET_SECONDS = 22;
   const progressRef = reactExports.useRef(0);
   const progressBarRef = reactExports.useRef(null);
   const progressTextRef = reactExports.useRef(null);
   const progressStatusRef = reactExports.useRef(null);
+  const progressEtaRef = reactExports.useRef(null);
+  const progressRingRef = reactExports.useRef(null);
+  const progressStartTsRef = reactExports.useRef(null);
+  const progressLastStageRef = reactExports.useRef("");
   const progressIntervalRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (view === "processing") {
       if (progressIntervalRef.current) return;
       progressRef.current = 0;
+      progressStartTsRef.current = Date.now();
+      progressLastStageRef.current = "";
       const statuses = [
         { at: 0, text: t2("Preparing your image...") },
         { at: 15, text: t2("Analyzing body proportions...") },
@@ -22742,17 +23037,35 @@ function PrimeStyleTryonInner({
         { at: 75, text: t2("Refining details...") },
         { at: 90, text: t2("Almost there...") }
       ];
+      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 20;
       progressIntervalRef.current = setInterval(() => {
-        const p2 = progressRef.current;
-        if (p2 >= 100) return;
-        const increment = p2 < 30 ? 1.2 : p2 < 60 ? 0.8 : p2 < 80 ? 0.4 : p2 < 95 ? 0.15 : 0;
-        progressRef.current = Math.min(p2 + increment, 95);
-        const val = Math.round(progressRef.current);
+        if (completedRef.current) return;
+        const startTs = progressStartTsRef.current || Date.now();
+        const elapsed = (Date.now() - startTs) / 1e3;
+        const target = Math.min(95, elapsed / TARGET_SECONDS * 100);
+        progressRef.current = target;
+        const val = Math.round(target);
         if (progressBarRef.current) progressBarRef.current.style.width = `${val}%`;
         if (progressTextRef.current) progressTextRef.current.textContent = `${val}%`;
+        if (progressRingRef.current) {
+          const offset = RING_CIRCUMFERENCE2 * (1 - target / 100);
+          progressRingRef.current.style.strokeDashoffset = String(offset);
+        }
+        if (progressEtaRef.current) {
+          const remaining = Math.max(0, TARGET_SECONDS - Math.floor(elapsed));
+          progressEtaRef.current.textContent = elapsed >= TARGET_SECONDS ? t2("Finalizing...") : `~${remaining}s`;
+        }
         if (progressStatusRef.current) {
           const status = [...statuses].reverse().find((s) => val >= s.at);
-          if (status) progressStatusRef.current.textContent = status.text;
+          if (status && status.text !== progressLastStageRef.current) {
+            const el2 = progressStatusRef.current;
+            el2.style.opacity = "0";
+            setTimeout(() => {
+              el2.textContent = status.text;
+              el2.style.opacity = "1";
+            }, 180);
+            progressLastStageRef.current = status.text;
+          }
         }
       }, 200);
       return () => {
@@ -22764,8 +23077,9 @@ function PrimeStyleTryonInner({
         clearInterval(progressIntervalRef.current);
         progressIntervalRef.current = null;
       }
+      progressStartTsRef.current = null;
     }
-  }, [view]);
+  }, [view, t2]);
   reactExports.useEffect(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
@@ -23092,7 +23406,16 @@ function PrimeStyleTryonInner({
         progressRef.current = 100;
         if (progressBarRef.current) progressBarRef.current.style.width = "100%";
         if (progressTextRef.current) progressTextRef.current.textContent = "100%";
-        if (progressStatusRef.current) progressStatusRef.current.textContent = t2("Complete!");
+        if (progressRingRef.current) progressRingRef.current.style.strokeDashoffset = "0";
+        if (progressEtaRef.current) progressEtaRef.current.textContent = t2("Done");
+        if (progressStatusRef.current) {
+          const el2 = progressStatusRef.current;
+          el2.style.opacity = "0";
+          setTimeout(() => {
+            el2.textContent = t2("Complete!");
+            el2.style.opacity = "1";
+          }, 180);
+        }
         cleanupJob();
         setTryOnProcessing(false);
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
@@ -23501,25 +23824,29 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setTryOnProcessing(true);
+    const vtoCategory = measurementTypeToVtoCategory(detectMeasurementType(productTitle));
+    const isApparel = vtoCategory === "apparel";
     const previewObjUrl = (overrideFile ? null : previewUrl) || URL.createObjectURL(file);
     if (overrideFile || !previewUrl) setPreviewUrl(previewObjUrl);
     modelPoseRef.current = null;
     setBodyLandmarks(null);
-    detectMeasurementLines(previewObjUrl).then((lines) => {
-      modelPoseRef.current = lines;
-    }).catch(() => {
-    });
-    detectBodyLandmarks(previewObjUrl).then((lm) => {
-      setBodyLandmarks(lm);
-    }).catch(() => {
-    });
+    if (isApparel) {
+      detectMeasurementLines(previewObjUrl).then((lines) => {
+        modelPoseRef.current = lines;
+      }).catch(() => {
+      });
+      detectBodyLandmarks(previewObjUrl).then((lm) => {
+        setBodyLandmarks(lm);
+      }).catch(() => {
+      });
+    }
     try {
       const modelImage = await compressImage(file);
       let fitInfo;
-      if (sizingResult?.matchDetails?.length) {
+      if (isApparel && sizingResult?.matchDetails?.length) {
         fitInfo = buildFitInfo(sizingResult.matchDetails, modelPoseRef.current);
       }
-      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo);
+      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo, vtoCategory ?? "apparel");
       onProcessing?.(response.jobId);
       unsubRef.current = sseRef.current.onJob(response.jobId, handleVtoUpdate);
       let attempts = 0;
@@ -23550,11 +23877,13 @@ function PrimeStyleTryonInner({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, sizingResult, onProcessing, onError, handleVtoUpdate]);
+  }, [selectedFile, productImage, productTitle, sizingResult, onProcessing, onError, handleVtoUpdate]);
   const handleRetryWithFit = reactExports.useCallback(async (fitInfo) => {
     if (!selectedFile || !apiRef.current || !sseRef.current) return;
     setRetryLoading(true);
-    if (modelPoseRef.current) {
+    const vtoCategory = measurementTypeToVtoCategory(detectMeasurementType(productTitle));
+    const isApparel = vtoCategory === "apparel";
+    if (isApparel && modelPoseRef.current) {
       const AREA_MAP = {
         chest: "chest",
         bust: "chest",
@@ -23580,7 +23909,8 @@ function PrimeStyleTryonInner({
         pollingRef.current = null;
       }
       const modelImage = await compressImage(selectedFile);
-      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo);
+      const outboundFitInfo = isApparel ? fitInfo : void 0;
+      const response = await apiRef.current.submitTryOn(modelImage, productImage, outboundFitInfo, vtoCategory ?? "apparel");
       unsubRef.current = sseRef.current.onJob(response.jobId, (update) => {
         if (update.status === "completed" && update.imageUrl) {
           setResultImageUrl(update.imageUrl);
@@ -23645,7 +23975,7 @@ function PrimeStyleTryonInner({
     } catch {
       setRetryLoading(false);
     }
-  }, [selectedFile, productImage]);
+  }, [selectedFile, productImage, productTitle]);
   const handleDownload = reactExports.useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -24087,6 +24417,8 @@ function PrimeStyleTryonInner({
             progressBarRef,
             progressTextRef,
             progressStatusRef,
+            progressEtaRef,
+            progressRingRef,
             cn,
             t: t2
           }