@primestyleai/tryon 4.2.2 → 4.3.0

package/dist/react/index.js

@@ -426,7 +426,6 @@ const SIZE_CONVERSIONS = {
   "48": { US: "XXXL", UK: "20", EU: "48", IT: "52", FR: "48", DE: "48", JP: "19", KR: "105", AU: "20" },
   "50": { US: "XXXL", UK: "22", EU: "50", IT: "54", FR: "50", DE: "50", JP: "21", KR: "110", AU: "22" }
 };
-const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
 const TOTAL_STEPS = 4;
 function detectLocale() {
   if (typeof window === "undefined") return "US";
@@ -1014,7 +1013,7 @@ function PrimeStyleTryonInner({
     if (p.weightUnit) setWeightUnit(p.weightUnit);
     setFormKey((k) => k + 1);
   }, [profiles]);
-  useCallback((name, asNew) => {
+  const saveProfile = useCallback((name, asNew) => {
     const id = (asNew ? null : activeProfileId) || `p_${Date.now()}`;
     const p = {
       id,
@@ -1162,13 +1161,7 @@ function PrimeStyleTryonInner({
   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: t(STEP_LABELS[i]) })
-      ] })
-    ] }, i)) }) });
+    return /* @__PURE__ */ jsx("div", { className: "ps-tryon-dots", children: Array.from({ length: TOTAL_STEPS }, (_, i) => i + 1).map((i) => /* @__PURE__ */ jsx("div", { className: `ps-tryon-dot${i < stepIndex ? " ps-done" : i === stepIndex ? " ps-active" : ""}` }, i)) });
   }
   function WelcomeView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome", children: [
@@ -1246,12 +1239,17 @@ function PrimeStyleTryonInner({
     ) });
   }
   function SizingChoiceView() {
-    const [mode, setMode] = useState(sizingMethod === "exact" ? "exact" : "quick");
+    const [mode, setMode] = useState("exact");
+    const [saveToggle, setSaveToggle] = useState(false);
+    const [saveFormName, setSaveFormName] = useState("");
     const isCm = sizingUnit === "cm";
     const sgAvailable = sizeGuide?.found === true;
     const sgChecked = !sizeGuideFetching && sizeGuide !== null;
     const exactAvailable = sgChecked ? sgAvailable : true;
     const handleSubmit = async () => {
+      if (saveToggle && saveFormName.trim()) {
+        saveProfile(saveFormName.trim());
+      }
       setSizingMethod(mode);
       setSizingLoading(true);
       setView("size-result");
@@ -1362,6 +1360,22 @@ function PrimeStyleTryonInner({
           setMode("quick");
           setSizingMethod("quick");
         }, children: t("Not sure? Use height & weight instead") }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-save", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-tryon-sf-save-check", children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: saveToggle, onChange: (e) => setSaveToggle(e.target.checked) }),
+            /* @__PURE__ */ jsx("span", { children: t("Save as profile") })
+          ] }),
+          saveToggle && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "ps-tryon-sf-save-name",
+              placeholder: t("Profile name (e.g. John, Sarah)"),
+              value: saveFormName,
+              onChange: (e) => setSaveFormName(e.target.value)
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx("button", { className: "ps-tryon-sf-next", onClick: handleSubmit, children: t("Next") })
       ] })
     ] });
@@ -1751,7 +1765,7 @@ function PrimeStyleTryonInner({
     ] }),
     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 || view === "size-result" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+    }, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "sizing-choice" ? " 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: t("Virtual Try-On") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
@@ -1807,13 +1821,13 @@ const STYLES = `
   .ps-tryon-modal {
     background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
     border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);
-    max-width: var(--ps-modal-max-width, 32vw); max-height: 92vh; overflow-y: auto;
+    max-width: var(--ps-modal-max-width, 36vw); max-height: 92vh; overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
     box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: #333 transparent;
     flex-shrink: 0;
   }
-  .ps-tryon-modal-wide { max-width: 48vw; }
+  .ps-tryon-modal-wide { max-width: 52vw; }
   .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
   @keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
@@ -1900,25 +1914,14 @@ const STYLES = `
   .ps-tryon-lang-check { color: #bb945c; display: flex; align-items: center; }
 
   /* Stepper */
-  .ps-tryon-stepper { padding: 1.04vw 1.25vw 0.63vw; }
-  .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: 0.73vw; 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: 1.46vw; height: 1.46vw; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    border: 2px solid #333; font-size: 0.63vw; 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 0.21vw rgba(187,148,92,0.15); }
-  .ps-tryon-stepper-label { font-size: 0.52vw; margin-top: 0.26vw; 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; }
+  /* Dots progress */
+  .ps-tryon-dots { display: flex; align-items: center; gap: 0.42vw; padding: 0.83vw 1.25vw; }
+  .ps-tryon-dot {
+    width: 0.47vw; height: 0.47vw; border-radius: 50%; background: #333;
+    transition: all 0.3s ease;
+  }
+  .ps-tryon-dot.ps-done { background: #666; }
+  .ps-tryon-dot.ps-active { background: #fff; width: 0.57vw; height: 0.57vw; }
 
   /* Body */
   .ps-tryon-body { padding: 1.25vw; min-height: 15.6vw; }
@@ -1926,31 +1929,31 @@ const STYLES = `
   .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
-  .ps-tryon-welcome { text-align: center; padding: clamp(8px, 0.5vw, 12px) 0; }
-  .ps-tryon-welcome-hero { margin-bottom: clamp(16px, 1.3vw, 24px); }
+  .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }
+  .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: clamp(100px, 9vw, 160px); height: clamp(120px, 10.5vw, 190px); object-fit: cover; border-radius: clamp(10px, 0.9vw, 16px); border: 2px solid #333; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
-  .ps-tryon-welcome-sparkle { position: absolute; top: clamp(-6px, -0.5vw, -4px); right: clamp(-6px, -0.5vw, -4px); width: clamp(22px, 1.8vw, 30px); height: clamp(22px, 1.8vw, 30px); 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: clamp(10px, 0.9vw, 14px); height: clamp(10px, 0.9vw, 14px); }
+  .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: cover; border-radius: 0.9vw; border: 2px solid #333; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
+  .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; 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: 0.9vw; height: 0.9vw; }
   @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
-  .ps-tryon-welcome-title { font-size: clamp(18px, 1.4vw, 24px); font-weight: 700; color: #fff; margin: clamp(12px, 1vw, 18px) 0 clamp(4px, 0.3vw, 6px); letter-spacing: -0.01em; }
-  .ps-tryon-welcome-sub { font-size: clamp(13px, 0.9vw, 16px); color: #999; margin: 0; }
-  .ps-tryon-features { display: flex; gap: clamp(8px, 0.7vw, 12px); margin: clamp(16px, 1.3vw, 24px) 0; }
-  .ps-tryon-feature { flex: 1; padding: clamp(14px, 1vw, 18px) clamp(10px, 0.7vw, 14px); border: 1px solid #333; border-radius: clamp(10px, 0.8vw, 14px); text-align: center; transition: border-color 0.2s; }
+  .ps-tryon-welcome-title { font-size: 1.4vw; font-weight: 700; color: #fff; margin: 1vw 0 0.3vw; letter-spacing: -0.01em; }
+  .ps-tryon-welcome-sub { font-size: 0.9vw; color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: 0.7vw; margin: 1.3vw 0; }
+  .ps-tryon-feature { flex: 1; padding: 1vw 0.7vw; border: 1px solid #333; border-radius: 0.8vw; text-align: center; transition: border-color 0.2s; }
   .ps-tryon-feature:hover { border-color: #555; }
-  .ps-tryon-feature-icon { margin-bottom: clamp(6px, 0.4vw, 8px); color: #bb945c; display: flex; justify-content: center; }
-  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: clamp(18px, 1.2vw, 22px); height: clamp(18px, 1.2vw, 22px); }
-  .ps-tryon-feature-title { font-size: clamp(13px, 0.85vw, 15px); font-weight: 600; color: #fff; margin-bottom: 2px; }
-  .ps-tryon-feature-desc { font-size: clamp(11px, 0.7vw, 13px); color: #999; }
+  .ps-tryon-feature-icon { margin-bottom: 0.4vw; color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: 1.2vw; height: 1.2vw; }
+  .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: 0.7vw; color: #999; }
   .ps-tryon-cta {
-    width: 100%; padding: clamp(14px, 1vw, 18px); background: #bb945c; color: #111; border: none;
-    border-radius: clamp(10px, 0.8vw, 14px); font-size: clamp(14px, 1vw, 17px); font-weight: 700; cursor: pointer;
-    display: flex; align-items: center; justify-content: center; gap: clamp(6px, 0.5vw, 10px); transition: all 0.2s;
+    width: 100%; padding: 1vw; background: #bb945c; color: #111; border: none;
+    border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: 0.5vw; 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: clamp(11px, 0.7vw, 13px); color: #666; margin-top: clamp(10px, 0.7vw, 14px); }
+  .ps-tryon-welcome-note { font-size: 0.7vw; color: #666; margin-top: 0.7vw; }
 
   /* Upload */
   .ps-tryon-upload {
@@ -2004,62 +2007,62 @@ const STYLES = `
 
   /* Sizing — split layout (product image left, form right) */
   .ps-tryon-sizing-split {
-    display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(16px, 1.5vw, 28px);
-    min-height: clamp(300px, 22vw, 500px);
+    display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5vw;
+    min-height: 22vw;
   }
   .ps-tryon-sizing-img-col {
     display: flex; align-items: stretch; justify-content: center;
-    background: #0e0e0f; border-radius: clamp(10px, 0.8vw, 14px); overflow: hidden;
+    background: #0e0e0f; border-radius: 0.8vw; overflow: hidden;
   }
   .ps-tryon-sizing-product-img {
     width: 100%; height: 100%; object-fit: cover; object-position: top;
   }
   .ps-tryon-sizing-form-col {
     display: flex; flex-direction: column; justify-content: center;
-    padding: clamp(8px, 0.5vw, 14px) 0;
+    padding: 0.5vw 0;
   }
   .ps-tryon-sf-title {
-    font-size: clamp(18px, 1.3vw, 24px); font-weight: 700; color: #fff;
-    margin: 0 0 clamp(14px, 1vw, 20px); letter-spacing: -0.01em;
+    font-size: 1.3vw; font-weight: 700; color: #fff;
+    margin: 0 0 1vw; letter-spacing: -0.01em;
   }
   .ps-tryon-sf-unit-tabs {
-    display: flex; border-bottom: 1.5px solid #333; margin-bottom: clamp(14px, 1vw, 20px);
+    display: flex; border-bottom: 1.5px solid #333; margin-bottom: 1vw;
   }
   .ps-tryon-sf-unit-tab {
-    background: none; border: none; padding: clamp(6px, 0.4vw, 10px) clamp(12px, 0.8vw, 16px);
-    font-size: clamp(12px, 0.8vw, 14px); font-weight: 600; color: #666; cursor: pointer;
+    background: none; border: none; padding: 0.4vw 0.8vw;
+    font-size: 0.8vw; font-weight: 600; color: #666; cursor: pointer;
     font-family: inherit; transition: all 0.2s; border-bottom: 2px solid transparent;
     margin-bottom: -1.5px;
   }
   .ps-tryon-sf-unit-tab:hover { color: #999; }
   .ps-tryon-sf-unit-tab.ps-active { color: #fff; border-bottom-color: #bb945c; }
 
-  .ps-tryon-sf-profile-bar { margin-bottom: clamp(10px, 0.7vw, 14px); }
+  .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }
   .ps-tryon-sf-profile-select {
-    width: 100%; padding: clamp(6px, 0.4vw, 8px); background: #1a1b1a; color: #ccc;
-    border: 1px solid #333; border-radius: clamp(6px, 0.4vw, 8px);
-    font-size: clamp(11px, 0.75vw, 13px); font-family: inherit; cursor: pointer;
+    width: 100%; padding: 0.4vw; background: #1a1b1a; color: #ccc;
+    border: 1px solid #333; border-radius: 0.4vw;
+    font-size: 0.75vw; font-family: inherit; cursor: pointer;
   }
 
   .ps-tryon-sf-fields {
-    display: flex; flex-direction: column; gap: clamp(16px, 1.1vw, 22px);
+    display: flex; flex-direction: column; gap: 1.1vw;
     flex: 1;
   }
   .ps-tryon-sf-row {
     display: flex; align-items: center; justify-content: space-between;
-    border-bottom: 1px solid #2a2a2a; padding-bottom: clamp(10px, 0.7vw, 14px);
+    border-bottom: 1px solid #2a2a2a; padding-bottom: 0.7vw;
   }
   .ps-tryon-sf-label {
-    font-size: clamp(12px, 0.85vw, 15px); font-weight: 600; color: #ccc;
+    font-size: 0.85vw; font-weight: 600; color: #ccc;
     letter-spacing: 0.04em; flex-shrink: 0;
   }
   .ps-tryon-sf-input-wrap { flex: 1; display: flex; justify-content: flex-end; }
-  .ps-tryon-sf-inline { display: flex; align-items: center; gap: clamp(6px, 0.4vw, 10px); }
-  .ps-tryon-sf-ft-group { display: flex; align-items: center; gap: clamp(4px, 0.3vw, 8px); }
+  .ps-tryon-sf-inline { display: flex; align-items: center; gap: 0.4vw; }
+  .ps-tryon-sf-ft-group { display: flex; align-items: center; gap: 0.3vw; }
   .ps-tryon-sf-input {
     background: transparent; border: none; border-bottom: 1.5px solid #444;
-    color: #fff; font-size: clamp(14px, 1vw, 17px); font-family: inherit;
-    padding: clamp(4px, 0.3vw, 6px) 0; width: clamp(50px, 4vw, 80px);
+    color: #fff; font-size: 1vw; font-family: inherit;
+    padding: 0.3vw 0; width: 4vw;
     text-align: center; outline: none; transition: border-color 0.2s;
   }
   .ps-tryon-sf-input:focus { border-bottom-color: #bb945c; }
@@ -2067,33 +2070,51 @@ const STYLES = `
   .ps-tryon-sf-input::-webkit-outer-spin-button,
   .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-sf-unit {
-    font-size: clamp(11px, 0.75vw, 13px); color: #666; font-weight: 500;
+    font-size: 0.75vw; color: #666; font-weight: 500;
   }
 
-  .ps-tryon-sf-optional { margin-top: clamp(4px, 0.3vw, 6px); }
+  .ps-tryon-sf-optional { margin-top: 0.3vw; }
+  .ps-tryon-sf-optional { border-top: 1px solid #282828; margin-top: 0.42vw; padding-top: 0.42vw; }
+  .ps-tryon-sf-optional-fields {
+    display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.52vw;
+    animation: ps-fade-up 0.3s ease both;
+  }
   .ps-tryon-sf-optional-toggle {
-    font-size: clamp(11px, 0.75vw, 13px); color: #666; cursor: pointer;
+    font-size: 0.75vw; color: #666; cursor: pointer;
     font-family: inherit; list-style: none;
   }
   .ps-tryon-sf-optional-toggle:hover { color: #999; }
   .ps-tryon-sf-optional-toggle::-webkit-details-marker { display: none; }
-  .ps-tryon-sf-optional-fields { display: flex; flex-direction: column; gap: clamp(12px, 0.8vw, 16px); padding-top: clamp(10px, 0.7vw, 14px); }
+  .ps-tryon-sf-optional-fields { display: flex; flex-direction: column; gap: 0.8vw; padding-top: 0.7vw; }
 
-  .ps-tryon-sf-switch { margin-top: clamp(12px, 0.8vw, 16px); text-align: center; }
+  .ps-tryon-sf-switch { margin-top: 0.8vw; text-align: center; }
   .ps-tryon-sf-switch-btn {
-    background: none; border: none; color: #bb945c; font-size: clamp(12px, 0.8vw, 14px);
+    background: none; border: none; color: #bb945c; font-size: 0.8vw;
     font-weight: 600; cursor: pointer; font-family: inherit;
-    display: inline-flex; align-items: center; gap: clamp(4px, 0.3vw, 6px);
+    display: inline-flex; align-items: center; gap: 0.3vw;
     transition: color 0.2s;
   }
   .ps-tryon-sf-switch-btn:hover { color: #d6ba7d; }
-  .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: clamp(12px, 0.8vw, 14px); height: clamp(12px, 0.8vw, 14px); }
+  .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }
+
+  /* Save profile */
+  .ps-tryon-sf-save { margin-top: 0.42vw; display: flex; flex-direction: column; gap: 0.36vw; }
+  .ps-tryon-sf-save-check {
+    display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; color: #999; cursor: pointer; user-select: none;
+  }
+  .ps-tryon-sf-save-check input[type="checkbox"] { width: 0.83vw; height: 0.83vw; accent-color: #bb945c; cursor: pointer; }
+  .ps-tryon-sf-save-name {
+    padding: 0.42vw 0.63vw; border: 1.5px solid #333; border-radius: 0.42vw;
+    background: #111; color: #fff; font-size: 0.73vw; font-family: inherit; outline: none;
+    transition: border-color 0.2s; animation: ps-fade-up 0.2s ease both;
+  }
+  .ps-tryon-sf-save-name:focus { border-color: #bb945c; }
 
   .ps-tryon-sf-next {
-    margin-top: clamp(14px, 1vw, 20px); align-self: flex-end;
-    padding: clamp(10px, 0.7vw, 14px) clamp(28px, 2vw, 40px);
+    margin-top: 1vw; align-self: flex-end;
+    padding: 0.7vw 2vw;
     background: #bb945c; color: #111; border: none;
-    border-radius: clamp(8px, 0.6vw, 12px); font-size: clamp(14px, 0.95vw, 16px);
+    border-radius: 0.6vw; font-size: 0.95vw;
     font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
   .ps-tryon-sf-next:hover { background: #a07d4e; transform: translateY(-1px); }
@@ -2106,24 +2127,24 @@ const STYLES = `
   }
 
   /* Keep old class names for backwards compat */
-  .ps-tryon-section-title { font-size: clamp(14px, 0.95vw, 18px); font-weight: 600; color: #fff; margin: 0 0 clamp(12px, 0.8vw, 16px); }
-  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: clamp(30px, 2.5vw, 50px) clamp(15px, 1vw, 25px); text-align: center; }
-  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: clamp(12px, 0.8vw, 16px); animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .ps-tryon-section-title { font-size: 0.95vw; font-weight: 600; color: #fff; margin: 0 0 0.8vw; }
+  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.5vw 1vw; text-align: center; }
+  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 0.8vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
   .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
   @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
-  .ps-tryon-sg-checking-bar-wrap { width: clamp(120px, 9vw, 180px); height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: clamp(14px, 1vw, 20px); }
+  .ps-tryon-sg-checking-bar-wrap { width: 9vw; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 1vw; }
   .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #bb945c, #d6ba7d); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }
   @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
-  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: clamp(4px, 0.3vw, 6px); }
-  .ps-tryon-sg-checking-sub { font-size: clamp(11px, 0.75vw, 13px); color: #999; margin: 0; }
+  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.3vw; }
+  .ps-tryon-sg-checking-sub { font-size: 0.75vw; color: #999; margin: 0; }
 
   /* Back button */
-  .ps-tryon-back { display: flex; align-items: center; gap: clamp(4px, 0.3vw, 6px); background: none; border: none; color: #999; font-size: clamp(12px, 0.8vw, 14px); cursor: pointer; padding: 0; margin-bottom: clamp(10px, 0.7vw, 14px); font-family: inherit; transition: color 0.2s; }
+  .ps-tryon-back { display: flex; align-items: center; gap: 0.3vw; background: none; border: none; color: #999; font-size: 0.8vw; cursor: pointer; padding: 0; margin-bottom: 0.7vw; font-family: inherit; transition: color 0.2s; }
   .ps-tryon-back:hover { color: #fff; }
   .ps-tryon-back svg { stroke: currentColor; fill: none; }
 
   /* Sizing form (legacy — redirect to split view) */
-  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: clamp(10px, 0.7vw, 14px); }
+  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.7vw; }
   .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }
   .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: #ccc; min-width: 4.7vw; flex-shrink: 0; }
   .ps-tryon-input-row input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",
@@ -55,6 +55,6 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "@primestyleai/tryon": "^4.1.2"
+    "@primestyleai/tryon": "^4.2.2"
   }
 }