@primestyleai/tryon 4.2.1 → 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";
@@ -1162,31 +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)) }) });
-  }
-  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,
-          defaultValue: formRef.current[fieldKey] || "",
-          onInput: (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)) });
+    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: [
@@ -1264,233 +1239,152 @@ function PrimeStyleTryonInner({
     ) });
   }
   function SizingChoiceView() {
+    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;
-    if (sizeGuideFetching) {
-      return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-choice", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-checking", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 32 }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar-wrap", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar" }) }),
-        /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("Checking size guide...") }),
-        /* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: t("Looking for size chart data for this product") })
-      ] }) });
-    }
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
-      /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("How would you like to find your size?") }),
-      sgChecked && !sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice", children: [
-        t("This product doesn't have a size guide — you can still see how it looks on you!"),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sg-notice-cta", onClick: () => {
-          setSizingMethod(null);
-          setView("upload");
-        }, children: [
-          t("Try It On"),
-          " ",
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ] })
+    const exactAvailable = sgChecked ? sgAvailable : true;
+    const handleSubmit = async () => {
+      if (saveToggle && saveFormName.trim()) {
+        saveProfile(saveFormName.trim());
+      }
+      setSizingMethod(mode);
+      setSizingLoading(true);
+      setView("size-result");
+      await submitSizing();
+    };
+    const renderQuickFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "ps-tryon-sf-label", children: t("HEIGHT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-input-wrap", children: heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-ft-group", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", className: "ps-tryon-sf-input", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("feet") }),
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "10", className: "ps-tryon-sf-input", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("inches") })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "175", className: "ps-tryon-sf-input", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("cm") })
+        ] }) })
       ] }),
-      /* @__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__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Enter my measurements") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: sizeGuide?.requiredFields?.length ? sizeGuide.requiredFields.filter((f) => f.required).slice(0, 3).map((f) => t(f.label)).join(", ") + (sizeGuide.requiredFields.length > 3 ? ` ${t("& more")}` : "") : t("Chest, waist, hips, shoes & more") })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: t("Best accuracy") })
-        ] }),
-        /* @__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__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Just height & weight") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Quick estimate in seconds") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
-          setSizingMethod(null);
-          setView("upload");
-        }, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(CameraIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Skip, just try it on") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Upload a photo to see how it looks") })
-          ] })
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "ps-tryon-sf-label", children: t("WEIGHT") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "170" : "75", className: "ps-tryon-sf-input", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: weightUnit })
         ] })
       ] })
     ] });
-  }
-  function SizingFormView() {
-    const isFemale = formGender === "female";
-    const isCm = sizingUnit === "cm";
-    const [saveToggle, setSaveToggle] = useState(false);
-    const [saveFormName, setSaveFormName] = useState("");
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => setView("sizing-choice"), children: [
-        /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
-        " ",
-        t("Back")
-      ] }),
-      sizingMethod === "exact" && 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: t("Auto-fill from saved profile...") }),
-        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
-          p.name,
-          " (",
-          p.gender === "female" ? t("Women's") : t("Men's"),
-          ")"
-        ] }, p.id))
-      ] }) }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-tabs", children: [
-        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${isCm ? " ps-active" : ""}`, onClick: () => {
-          setSizingUnit("cm");
-          setHeightUnit("cm");
-          setWeightUnit("kg");
-        }, children: "CM" }),
-        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${!isCm ? " ps-active" : ""}`, onClick: () => {
-          setSizingUnit("in");
-          setHeightUnit("ft");
-          setWeightUnit("lbs");
-        }, children: "Inches" })
-      ] }),
-      sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
-        const reqFields = dynamicFields.filter((f) => f.required);
-        const optFields = dynamicFields.filter((f) => !f.required);
-        const isShoeProduct = reqFields.some((f) => f.category === "shoe");
-        const isClothingProduct = reqFields.some((f) => f.category === "body");
-        const renderField = (field) => {
-          if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
-            const regionField = shoeField;
-            const key = regionField.key;
-            const showOriginal = field.key !== key;
-            return /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx(InputRow, { label: `${regionField.label}${field.required ? " *" : ""}`, fieldKey: key, placeholder: regionField.ph }),
-              showOriginal && /* @__PURE__ */ jsx(InputRow, { label: t(field.label), fieldKey: field.key, placeholder: field.placeholder })
-            ] }, field.key);
-          }
-          const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
-          const phIn = !isNaN(phNum) && phNum > 0 && field.unit === "cm" ? String(Math.round(phNum / 2.54)) : "";
-          const placeholder = isCm ? field.placeholder || "" : phIn ? `e.g. ${phIn}` : field.placeholder || "";
-          return /* @__PURE__ */ jsx(
-            InputRow,
-            {
-              label: `${t(field.label)}${field.required ? " *" : ""}`,
-              fieldKey: field.key,
-              placeholder,
-              type: "number",
-              unit: field.unit === "cm" ? sizingUnit : void 0
-            },
-            field.key
-          );
-        };
-        const profileExtras = [];
-        if (isShoeProduct && !dynamicFields.some((f) => f.category === "body")) {
-          const bodyFields = isFemale ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
-          for (const f of bodyFields) {
-            if (!dynamicFields.some((d) => d.key === f.key)) {
-              profileExtras.push({ ...f, required: false });
-            }
-          }
-        }
-        if (isClothingProduct && !dynamicFields.some((f) => f.category === "shoe")) {
-          profileExtras.push({ key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" });
-          profileExtras.push({ key: shoeField.key, label: shoeField.label, required: false, unit: "size", placeholder: shoeField.ph, category: "shoe" });
+    const renderExactFields = () => {
+      const reqFields = dynamicFields.filter((f) => f.required);
+      const optFields = dynamicFields.filter((f) => !f.required);
+      const renderField = (field) => {
+        if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
+          const regionField = shoeField;
+          return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+            /* @__PURE__ */ jsxs("label", { className: "ps-tryon-sf-label", children: [
+              regionField.label.toUpperCase(),
+              field.required ? " *" : ""
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-inline", children: /* @__PURE__ */ jsx("input", { type: "text", placeholder: regionField.ph, className: "ps-tryon-sf-input", defaultValue: formRef.current[regionField.key] || "", onInput: (e) => updateField(regionField.key, e.target.value) }) })
+          ] }, field.key);
         }
-        const allOptFields = [...optFields, ...profileExtras];
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          reqFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: t("Required for this product") }),
-            reqFields.map(renderField)
+        const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
+        const phIn = !isNaN(phNum) && phNum > 0 && field.unit === "cm" ? String(Math.round(phNum / 2.54)) : "";
+        const placeholder = isCm ? field.placeholder?.replace("e.g. ", "") || "" : phIn || field.placeholder?.replace("e.g. ", "") || "";
+        return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-tryon-sf-label", children: [
+            t(field.label).toUpperCase(),
+            field.required ? " *" : ""
           ] }),
-          isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-            /* @__PURE__ */ jsx("label", { children: t("Fit type") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: `ps-tryon-unit-btn${(formRef.current.fitPreference || "standard") === fp ? " ps-active" : ""}`,
-                onClick: (e) => {
-                  updateField("fitPreference", fp);
-                  const btns = e.target.parentElement.querySelectorAll(".ps-tryon-unit-btn");
-                  btns.forEach((b) => b.classList.toggle("ps-active", b.dataset.fp === fp));
-                },
-                "data-fp": fp,
-                children: t(fp.charAt(0).toUpperCase() + fp.slice(1))
-              },
-              fp
-            )) })
-          ] }),
-          allOptFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-section", children: [
-            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-optional-toggle", onClick: (e) => {
-              const wrap = e.target.closest(".ps-tryon-optional-section").querySelector(".ps-tryon-optional-fields");
-              const arrow = e.target.closest(".ps-tryon-optional-toggle").querySelector(".ps-tryon-chevron");
-              if (wrap) {
-                const open = wrap.style.display !== "none";
-                wrap.style.display = open ? "none" : "flex";
-                if (arrow) arrow.style.transform = open ? "rotate(0deg)" : "rotate(180deg)";
-              }
-            }, children: [
-              /* @__PURE__ */ jsx("span", { children: t("Optional — improve accuracy & save to profile") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-chevron", children: "▾" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: allOptFields.map(renderField) })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+            /* @__PURE__ */ jsx("input", { type: "number", placeholder, className: "ps-tryon-sf-input", defaultValue: formRef.current[field.key] || "", onInput: (e) => updateField(field.key, e.target.value) }),
+            field.unit === "cm" && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: sizingUnit })
           ] })
-        ] });
-      })() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            t("Height"),
-            " *"
-          ] }),
-          heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
-            /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
-            /* @__PURE__ */ jsx("span", { children: t("ft") }),
-            /* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
-            /* @__PURE__ */ jsx("span", { children: t("in") })
-          ] }) : /* @__PURE__ */ jsx("input", { type: "number", placeholder: "e.g. 175", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
-          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("cm"), value: "cm" }, { label: t("ft"), value: "ft" }], value: heightUnit, onChange: setHeightUnit })
+        ] }, field.key);
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        reqFields.map(renderField),
+        optFields.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-sf-optional", children: [
+          /* @__PURE__ */ jsx("summary", { className: "ps-tryon-sf-optional-toggle", children: t("Optional fields") }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-optional-fields", children: optFields.map(renderField) })
+        ] })
+      ] });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-split", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-img-col", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-tryon-sizing-product-img" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form-col", children: [
+        /* @__PURE__ */ jsx("h3", { className: "ps-tryon-sf-title", children: t("Let's find your best fit") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-unit-tabs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-tryon-sf-unit-tab${(isCm || heightUnit === "cm") && mode !== "exact" ? " ps-active" : ""} ${mode === "exact" && isCm ? " ps-active" : ""}`,
+              onClick: () => {
+                setSizingUnit("cm");
+                setHeightUnit("cm");
+                setWeightUnit("kg");
+              },
+              children: t("Metric")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-tryon-sf-unit-tab${(!isCm || heightUnit === "ft") && mode !== "exact" ? " ps-active" : ""} ${mode === "exact" && !isCm ? " ps-active" : ""}`,
+              onClick: () => {
+                setSizingUnit("in");
+                setHeightUnit("ft");
+                setWeightUnit("lbs");
+              },
+              children: t("Imperial")
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            t("Weight"),
-            " *"
+        mode === "exact" && profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-sf-profile-select", value: activeProfileId || "", onChange: (e) => {
+          if (e.target.value) applyProfile(e.target.value);
+        }, children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: t("Load saved profile...") }),
+          profiles.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-fields", children: mode === "quick" ? renderQuickFields() : renderExactFields() }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-switch", children: mode === "quick" && exactAvailable ? /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sf-switch-btn", onClick: () => {
+          setMode("exact");
+          setSizingMethod("exact");
+        }, children: [
+          t("I know my measurements"),
+          " ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        ] }) : mode === "exact" ? /* @__PURE__ */ jsx("button", { className: "ps-tryon-sf-switch-btn", onClick: () => {
+          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") })
           ] }),
-          /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
-          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("kg"), value: "kg" }, { label: t("lbs"), value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: t("Fill in what you know — more measurements = better accuracy.") }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-form-save-toggle", children: [
-        /* @__PURE__ */ jsxs("label", { className: "ps-tryon-form-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)
+            }
+          )
         ] }),
-        saveToggle && /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            className: "ps-tryon-form-save-name",
-            placeholder: t("Profile name (e.g. John, Sarah)"),
-            value: saveFormName,
-            onChange: (e) => setSaveFormName(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: async () => {
-        if (saveToggle && saveFormName.trim()) {
-          saveProfile(saveFormName.trim());
-        }
-        setSizingLoading(true);
-        setView("size-result");
-        await submitSizing();
-      }, children: [
-        t("Get My Size"),
-        " ",
-        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        /* @__PURE__ */ jsx("button", { className: "ps-tryon-sf-next", onClick: handleSubmit, children: t("Next") })
       ] })
-    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
+    ] });
+  }
+  function SizingFormView() {
+    useEffect(() => {
+      setView("sizing-choice");
+    }, []);
+    return null;
   }
   function SizeResultView() {
     const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
@@ -1871,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: [
@@ -1927,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; } }
 
@@ -2020,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; }
@@ -2046,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 {
@@ -2122,59 +2005,146 @@ const STYLES = `
   }
   .ps-tryon-profile-select:focus { border-color: #bb945c; }
 
-  /* Sizing choice */
-  .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 0.83vw; font-weight: 600; color: #fff; margin: 0 0 0.83vw; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 0.52vw; }
-  .ps-tryon-choice-card {
-    display: flex; align-items: center; gap: 0.73vw; padding: 0.83vw;
-    border: 1.5px solid #333; border-radius: 0.63vw;
-    background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
-    width: 100%; font-family: inherit; position: relative; overflow: hidden;
-  }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 0.31vw 1.04vw rgba(187,148,92,0.08); }
-  .ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
-  .ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
-  .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-choice-info { flex: 1; min-width: 0; }
-  .ps-tryon-choice-title { font-size: 0.73vw; font-weight: 600; color: #fff; }
-  .ps-tryon-choice-desc { font-size: 0.63vw; color: #999; margin-top: 2px; }
-  .ps-tryon-choice-badge {
-    padding: 0.16vw 0.52vw; border-radius: 1.04vw; flex-shrink: 0;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 0.52vw; font-weight: 600;
-  }
-  .ps-tryon-sg-notice {
-    font-size: 0.68vw; color: #999; text-align: center; padding: 0.73vw 0.83vw;
-    margin-bottom: 0.73vw; border: 1px solid #333; border-radius: 0.63vw; background: #1a1b1a;
-    display: flex; flex-direction: column; align-items: center; gap: 0.57vw;
-  }
-  .ps-tryon-sg-notice-cta {
-    display: inline-flex; align-items: center; gap: 0.31vw;
-    padding: 0.42vw 1vw;
-    background: #bb945c; color: #111; border: none; border-radius: 0.42vw;
-    font-size: 0.68vw; font-weight: 700; cursor: pointer;
-    transition: all 0.2s; font-family: inherit;
+  /* Sizing — split layout (product image left, form right) */
+  .ps-tryon-sizing-split {
+    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: 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: 0.5vw 0;
+  }
+  .ps-tryon-sf-title {
+    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: 1vw;
+  }
+  .ps-tryon-sf-unit-tab {
+    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-sg-notice-cta:hover { background: #a07d4e; }
-  .ps-tryon-sg-notice-cta svg { stroke: #111; }
-  .ps-tryon-sg-found svg { stroke: #4ade80; }
-  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.08vw 1.04vw; text-align: center; }
-  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 0.83vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .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: 0.7vw; }
+  .ps-tryon-sf-profile-select {
+    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: 1.1vw;
+    flex: 1;
+  }
+  .ps-tryon-sf-row {
+    display: flex; align-items: center; justify-content: space-between;
+    border-bottom: 1px solid #2a2a2a; padding-bottom: 0.7vw;
+  }
+  .ps-tryon-sf-label {
+    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: 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: 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; }
+  .ps-tryon-sf-input::placeholder { color: #555; }
+  .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: 0.75vw; color: #666; font-weight: 500;
+  }
+
+  .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: 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: 0.8vw; padding-top: 0.7vw; }
+
+  .ps-tryon-sf-switch { margin-top: 0.8vw; text-align: center; }
+  .ps-tryon-sf-switch-btn {
+    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: 0.3vw;
+    transition: color 0.2s;
+  }
+  .ps-tryon-sf-switch-btn:hover { color: #d6ba7d; }
+  .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: 1vw; align-self: flex-end;
+    padding: 0.7vw 2vw;
+    background: #bb945c; color: #111; border: none;
+    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); }
+
+  /* Mobile: stack vertically */
+  @media (max-width: 600px) {
+    .ps-tryon-sizing-split { grid-template-columns: 1fr; }
+    .ps-tryon-sizing-img-col { max-height: 200px; }
+    .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }
+  }
+
+  /* Keep old class names for backwards compat */
+  .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: 9.4vw; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 1.04vw; }
+  .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: 0.31vw; }
-  .ps-tryon-sg-checking-sub { font-size: 0.68vw; 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: 0.31vw; background: none; border: none; color: #999; font-size: 0.68vw; cursor: pointer; padding: 0; margin-bottom: 0.63vw; 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 */
-  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.63vw; }
+  /* Sizing form (legacy — redirect to split view) */
+  .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.1",
+  "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"
   }
 }