@primestyleai/tryon 3.20.0 → 4.0.0

package/dist/{index-Dr4MxT8W.js → index-aIBOmApE.js}

@@ -312,6 +312,8 @@ const en = {
   "Showing fit for size": "Showing fit for size",
   "Back to": "Back to",
   "Edit values": "Edit values",
+  "Based on your updated measurements, size": "Based on your updated measurements, size",
+  "may be a better fit": "may be a better fit",
   "Fit Analysis": "Fit Analysis",
   "Show more": "Show more",
   "Done": "Done",

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-Dr4MxT8W.js";
-import { P, b, T, d, r } from "./index-Dr4MxT8W.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-aIBOmApE.js";
+import { P, b, T, d, r } from "./index-aIBOmApE.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-Dr4MxT8W.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-aIBOmApE.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -1565,12 +1565,30 @@ function PrimeStyleTryonInner({
         return { area: m.measurement, userNum, chartLabel, fit };
       });
     }, [sizingResult, compareSize, editVals, chartRangeFor]);
+    const suggestedSize = useMemo(() => {
+      if (!Object.keys(editVals).length || !sizingResult?.matchDetails?.length || !allSizes.length) return null;
+      let bestSize = "";
+      let bestScore = -1;
+      for (const size of allSizes) {
+        let score = 0;
+        for (const m of sizingResult.matchDetails) {
+          const edited = editVals[m.measurement];
+          const userNum = edited !== void 0 && edited !== "" ? parseFloat(edited) : pNum(m.userValue);
+          const alt = chartRangeFor(m.measurement, size);
+          if (alt && userNum >= alt.min && userNum <= alt.max) score++;
+        }
+        if (score > bestScore) {
+          bestScore = score;
+          bestSize = size;
+        }
+      }
+      return bestSize && bestSize !== recSize ? bestSize : null;
+    }, [editVals, sizingResult, allSizes, recSize, chartRangeFor]);
     const allIntlSizes = useMemo(() => {
       const backendIntl = sizingResult?.internationalSizes || {};
       const upper = recSize.toUpperCase().trim();
       const fromTable = SIZE_CONVERSIONS[upper] || SIZE_CONVERSIONS[recSize] || {};
-      const merged = { ...fromTable, ...backendIntl };
-      return merged;
+      return { ...fromTable, ...backendIntl };
     }, [sizingResult, recSize]);
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr", children: [
       sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-loading", children: [
@@ -1585,74 +1603,71 @@ function PrimeStyleTryonInner({
             /* @__PURE__ */ jsx("div", { className: `ps-tryon-sr-hero-conf ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence === "high" ? t("High Confidence") : sizingResult.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence") })
           ] })
         ] }),
+        suggestedSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-suggestion", children: [
+          /* @__PURE__ */ jsx(SparkleIcon, { size: 14 }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            t("Based on your updated measurements, size"),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: suggestedSize }),
+            " ",
+            t("may be a better fit")
+          ] })
+        ] }),
         Object.keys(allIntlSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Your size in other countries") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: Object.entries(allIntlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-section-title", children: t("Your size in other countries") }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: Object.entries(allIntlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
             /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: val }),
             /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: code })
           ] }, code)) })
         ] }),
-        allSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-compare", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Compare with another size") }),
-          /* @__PURE__ */ jsx("select", { className: "ps-tryon-sr-compare-select", value: selSize, onChange: (e) => setCompareSize(e.target.value), children: allSizes.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
-            s,
-            s === recSize ? ` ★ ${t("recommended")}` : ""
-          ] }, s)) }),
-          compareSize && compareSize !== recSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-compare-note", children: [
-            t("Showing fit for size"),
-            " ",
-            /* @__PURE__ */ jsx("strong", { children: compareSize }),
-            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-compare-reset", onClick: () => setCompareSize(""), children: [
-              t("Back to"),
-              " ",
-              recSize
-            ] })
-          ] })
-        ] }),
         fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header-row", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-top", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-section-title", children: t("Fit Analysis") }),
             /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-edit-btn", onClick: () => setEditing(!editing), children: [
               /* @__PURE__ */ jsx(SvgIcon, { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", size: 12 }),
               editing ? t("Done") : t("Edit values")
             ] })
           ] }),
-          fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-card ps-fit-${row.fit}`, children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-card-top", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-area", children: row.area }),
-              /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: row.fit === "good" ? `✓ ${t("within range")}` : row.fit === "tight" ? `↑ ${t("may be snug")}` : `↓ ${t("may be loose")}` })
+          allSizes.length > 1 && /* @__PURE__ */ jsx("select", { className: "ps-tryon-sr-compare-select", value: selSize, onChange: (e) => setCompareSize(e.target.value), children: allSizes.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
+            s,
+            s === recSize ? ` ★ ${t("recommended")}` : ""
+          ] }, s)) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fit-cards", children: fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fc ps-fit-${row.fit}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-head", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fc-area", children: row.area }),
+              /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fc-badge ps-fit-${row.fit}`, children: row.fit === "good" ? `✓ ${t("within range")}` : row.fit === "tight" ? `↑ ${t("may be snug")}` : `↓ ${t("may be loose")}` })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-card-bottom", children: [
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-val-label", children: t("You") }),
-                editing ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val-input-wrap", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-body", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-col", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fc-label", children: t("You") }),
+                editing ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-edit", children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
                       type: "number",
-                      className: "ps-tryon-sr-fit-input",
+                      className: "ps-tryon-sr-fc-input",
                       value: editVals[row.area] !== void 0 ? editVals[row.area] : row.userNum,
                       onChange: (e) => setEditVals((prev) => ({ ...prev, [row.area]: e.target.value }))
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-unit", children: unitLbl })
-                ] }) : /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-val-text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fc-unit", children: unitLbl })
+                ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-value", children: [
                   row.userNum,
                   " ",
                   unitLbl
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val", children: [
-                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-val-label", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-col", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-label", children: [
                   t("Chart"),
                   " (",
                   selSize,
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-val-text", children: row.chartLabel })
+                /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fc-value", children: row.chartLabel })
               ] })
             ] })
-          ] }, i))
+          ] }, i)) })
         ] }),
         fitRows.length === 0 && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-ctas", children: [
@@ -2324,62 +2339,59 @@ const STYLES = `
   .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
 
   /* ── Size Result (redesigned) ── */
-  .ps-tryon-sr { display: flex; flex-direction: column; gap: 1.1vw; }
-  .ps-tryon-sr-loading { text-align: center; padding: 2vw 0; }
-  .ps-tryon-sr-loading p { font-size: 0.83vw; color: #999; margin-top: 0.5vw; }
+  .ps-tryon-sr { display: flex; flex-direction: column; gap: 1.25vw; }
+  .ps-tryon-sr-loading { text-align: center; padding: 3vw 0; }
+  .ps-tryon-sr-loading p { font-size: 0.83vw; color: #666; margin-top: 0.6vw; }
   .ps-tryon-size-loading-spinner {
-    width: 2vw; height: 2vw; border: 3px solid #333;
+    width: 1.8vw; height: 1.8vw; border: 2px solid #282828;
     border-top-color: #bb945c; border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto;
+    animation: ps-spin 0.7s linear infinite; margin: 0 auto;
   }
   @keyframes ps-spin { to { transform: rotate(360deg); } }
 
   /* Hero */
   .ps-tryon-sr-hero {
-    display: flex; align-items: center; gap: 1vw; padding: 1vw 1.2vw;
-    background: linear-gradient(135deg, rgba(187,148,92,0.08), rgba(187,148,92,0.02));
-    border: 1.5px solid rgba(187,148,92,0.25); border-radius: 0.83vw;
+    display: flex; align-items: center; gap: 1vw; padding: 1.1vw 1.3vw;
+    background: linear-gradient(135deg, rgba(187,148,92,0.06), rgba(187,148,92,0.01));
+    border: 1px solid rgba(187,148,92,0.2); border-radius: 0.83vw;
   }
   .ps-tryon-sr-hero-badge {
-    min-width: 3.5vw; height: 3.5vw; display: flex; align-items: center; justify-content: center;
+    min-width: 3.2vw; height: 3.2vw; display: flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, #bb945c, #d6ba7d); color: #111;
-    font-size: 1.5vw; font-weight: 800; border-radius: 0.73vw; letter-spacing: -0.02em;
-    padding: 0 0.8vw; box-shadow: 0 0.4vw 1.2vw rgba(187,148,92,0.25);
+    font-size: 1.35vw; font-weight: 800; border-radius: 0.63vw; letter-spacing: -0.02em;
+    padding: 0 0.73vw; box-shadow: 0 0.3vw 1vw rgba(187,148,92,0.3);
   }
   .ps-tryon-sr-hero-info { flex: 1; }
-  .ps-tryon-sr-hero-title { font-size: 1.04vw; font-weight: 700; color: #fff; margin-bottom: 0.15vw; }
-  .ps-tryon-sr-hero-conf { font-size: 0.78vw; font-weight: 600; }
+  .ps-tryon-sr-hero-title { font-size: 1vw; font-weight: 700; color: #fff; margin-bottom: 0.1vw; }
+  .ps-tryon-sr-hero-conf { font-size: 0.73vw; font-weight: 600; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
 
+  /* Suggestion banner */
+  .ps-tryon-sr-suggestion {
+    display: flex; align-items: center; gap: 0.52vw;
+    padding: 0.63vw 0.83vw; border-radius: 0.52vw;
+    background: rgba(187,148,92,0.08); border: 1px solid rgba(187,148,92,0.2);
+    font-size: 0.73vw; color: #d6ba7d; animation: ps-fade-up 0.3s ease both;
+  }
+  .ps-tryon-sr-suggestion svg { stroke: #bb945c; flex-shrink: 0; }
+  .ps-tryon-sr-suggestion strong { color: #fff; }
+
+  /* Section titles */
+  .ps-tryon-sr-section-title { font-size: 0.73vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.52vw; }
+
   /* International sizes */
   .ps-tryon-sr-intl { }
-  .ps-tryon-sr-label { font-size: 0.78vw; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.52vw; }
-  .ps-tryon-sr-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #666; font-style: italic; }
-  .ps-tryon-sr-intl-primary { display: flex; flex-wrap: wrap; gap: 0.42vw; margin-bottom: 0.52vw; }
+  .ps-tryon-sr-intl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.8vw, 1fr)); gap: 0.42vw; }
   .ps-tryon-sr-intl-card {
-    flex: 1; min-width: 3.5vw; display: flex; flex-direction: column; align-items: center;
-    padding: 0.57vw 0.42vw; border: 1.5px solid #333; border-radius: 0.63vw;
-    background: #1a1b1a; transition: border-color 0.2s;
+    display: flex; flex-direction: column; align-items: center;
+    padding: 0.62vw 0.36vw; border: 1px solid #282828; border-radius: 0.52vw;
+    background: #161616; transition: all 0.2s;
   }
-  .ps-tryon-sr-intl-card:hover { border-color: #555; }
-  .ps-tryon-sr-intl-card-val { font-size: 1.04vw; font-weight: 800; color: #fff; line-height: 1.2; }
-  .ps-tryon-sr-intl-card-code { font-size: 0.57vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.1vw; }
-
-  .ps-tryon-sr-intl-more { }
-  .ps-tryon-sr-intl-more-btn {
-    font-size: 0.73vw; color: #bb945c; font-weight: 600; cursor: pointer;
-    list-style: none; margin-bottom: 0.42vw; font-family: inherit;
-  }
-  .ps-tryon-sr-intl-more-btn::-webkit-details-marker { display: none; }
-  .ps-tryon-sr-intl-more-btn::before { content: "▸ "; }
-  .ps-tryon-sr-intl-more[open] .ps-tryon-sr-intl-more-btn::before { content: "▾ "; }
+  .ps-tryon-sr-intl-card:hover { border-color: #444; background: #1c1c1c; }
+  .ps-tryon-sr-intl-card-val { font-size: 1.1vw; font-weight: 800; color: #fff; line-height: 1.15; }
+  .ps-tryon-sr-intl-card-code { font-size: 0.52vw; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.15vw; }
 
-  .ps-tryon-sr-intl-grid { display: flex; flex-wrap: wrap; gap: 0.42vw; }
-  .ps-tryon-sr-intl-item {
-    display: flex; align-items: center; border: 1.5px solid #333; border-radius: 0.52vw; overflow: hidden;
-  }
-  .ps-tryon-sr-intl-code { padding: 0.42vw 0.57vw; font-size: 0.68vw; color: #999; font-weight: 700; background: rgba(255,255,255,0.03); letter-spacing: 0.04em; }
-  .ps-tryon-sr-intl-val { padding: 0.42vw 0.68vw; font-size: 0.83vw; color: #fff; font-weight: 700; }
+  /* (intl grid uses .ps-tryon-sr-intl-grid defined above) */
 
   /* Size selector */
   .ps-tryon-sr-sizes { }
@@ -2405,55 +2417,61 @@ const STYLES = `
   .ps-tryon-sr-comparing { font-size: 0.73vw; color: #bb945c; margin-top: 0.42vw; }
   .ps-tryon-sr-comparing strong { color: #d6ba7d; }
 
-  /* Fit analysis cards */
-  .ps-tryon-sr-fit { display: flex; flex-direction: column; gap: 0.52vw; }
-  .ps-tryon-sr-fit-header-row {
-    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1vw;
+  /* Fit analysis */
+  .ps-tryon-sr-fit { }
+  .ps-tryon-sr-fit-top {
+    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.52vw;
   }
   .ps-tryon-sr-edit-btn {
     display: inline-flex; align-items: center; gap: 0.31vw;
-    padding: 0.26vw 0.63vw; border: 1.5px solid #bb945c; border-radius: 0.36vw;
-    background: transparent; color: #bb945c; font-size: 0.63vw; font-weight: 600;
+    padding: 0.31vw 0.73vw; border: 1px solid rgba(187,148,92,0.4); border-radius: 0.42vw;
+    background: rgba(187,148,92,0.06); color: #bb945c; font-size: 0.68vw; font-weight: 600;
     cursor: pointer; font-family: inherit; transition: all 0.2s;
   }
-  .ps-tryon-sr-edit-btn:hover { background: rgba(187,148,92,0.1); }
+  .ps-tryon-sr-edit-btn:hover { background: rgba(187,148,92,0.12); border-color: #bb945c; }
   .ps-tryon-sr-edit-btn svg { stroke: currentColor; }
-  .ps-tryon-sr-fit-card {
-    border: 1.5px solid #333; border-radius: 0.63vw; overflow: hidden; transition: border-color 0.2s;
+
+  .ps-tryon-sr-fit-cards { display: flex; flex-direction: column; gap: 0.42vw; }
+
+  .ps-tryon-sr-fc {
+    border: 1px solid #282828; border-radius: 0.63vw; overflow: hidden;
+    transition: border-color 0.2s;
   }
-  .ps-tryon-sr-fit-card.ps-fit-good { border-left: 3px solid #4ade80; }
-  .ps-tryon-sr-fit-card.ps-fit-tight { border-left: 3px solid #f59e0b; }
-  .ps-tryon-sr-fit-card.ps-fit-loose { border-left: 3px solid #60a5fa; }
-  .ps-tryon-sr-fit-card-top {
+  .ps-tryon-sr-fc.ps-fit-good { border-left: 3px solid #4ade80; }
+  .ps-tryon-sr-fc.ps-fit-tight { border-left: 3px solid #f59e0b; }
+  .ps-tryon-sr-fc.ps-fit-loose { border-left: 3px solid #60a5fa; }
+
+  .ps-tryon-sr-fc-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 0.52vw 0.83vw; background: #1a1b1a;
-  }
-  .ps-tryon-sr-fit-area { font-size: 0.83vw; font-weight: 600; color: #fff; }
-  .ps-tryon-sr-fit-card-bottom {
-    display: flex; gap: 1vw; padding: 0.52vw 0.83vw;
+    padding: 0.57vw 0.83vw; background: #161616;
   }
-  .ps-tryon-sr-fit-val { flex: 1; }
-  .ps-tryon-sr-fit-val-label { font-size: 0.57vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.21vw; display: block; }
-  .ps-tryon-sr-fit-val-input-wrap { display: flex; align-items: center; gap: 0.26vw; }
-  .ps-tryon-sr-fit-val-text { font-size: 0.83vw; font-weight: 600; color: #ccc; }
+  .ps-tryon-sr-fc-area { font-size: 0.83vw; font-weight: 700; color: #fff; }
 
-  .ps-tryon-sr-fit-input {
-    width: 4vw; padding: 0.31vw 0.42vw; border: 1.5px solid #444; border-radius: 0.36vw;
-    background: #0c0c0d; color: #fff; font-size: 0.83vw; font-weight: 600; font-family: inherit;
-    outline: none; text-align: center; -moz-appearance: textfield;
+  .ps-tryon-sr-fc-badge {
+    display: inline-flex; align-items: center; gap: 0.21vw; padding: 0.21vw 0.52vw;
+    border-radius: 0.31vw; font-size: 0.63vw; font-weight: 700; white-space: nowrap;
   }
-  .ps-tryon-sr-fit-input::-webkit-outer-spin-button,
-  .ps-tryon-sr-fit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-  .ps-tryon-sr-fit-input:focus { border-color: #bb945c; background: #1a1b1a; }
-  .ps-tryon-sr-fit-unit { font-size: 0.68vw; color: #666; }
+  .ps-tryon-sr-fc-badge.ps-fit-good { background: rgba(74,222,128,0.08); color: #4ade80; }
+  .ps-tryon-sr-fc-badge.ps-fit-tight { background: rgba(245,158,11,0.08); color: #f59e0b; }
+  .ps-tryon-sr-fc-badge.ps-fit-loose { background: rgba(96,165,250,0.08); color: #60a5fa; }
 
-  .ps-tryon-sr-fit-badge {
-    display: inline-flex; align-items: center; gap: 0.26vw; padding: 0.26vw 0.57vw;
-    border-radius: 0.36vw; font-size: 0.68vw; font-weight: 700; white-space: nowrap;
+  .ps-tryon-sr-fc-body {
+    display: flex; gap: 1.5vw; padding: 0.52vw 0.83vw 0.62vw;
+  }
+  .ps-tryon-sr-fc-col { flex: 1; }
+  .ps-tryon-sr-fc-label { font-size: 0.52vw; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.15vw; }
+  .ps-tryon-sr-fc-value { font-size: 0.88vw; font-weight: 600; color: #ccc; }
+  .ps-tryon-sr-fc-edit { display: flex; align-items: center; gap: 0.26vw; }
+  .ps-tryon-sr-fc-input {
+    width: 4.2vw; padding: 0.26vw 0.42vw; border: 1.5px solid #444; border-radius: 0.36vw;
+    background: #0c0c0d; color: #fff; font-size: 0.88vw; font-weight: 600; font-family: inherit;
+    outline: none; text-align: center; -moz-appearance: textfield;
+    transition: border-color 0.2s, background 0.2s;
   }
-  .ps-tryon-sr-fit-badge.ps-fit-good { background: rgba(74,222,128,0.1); color: #4ade80; }
-  .ps-tryon-sr-fit-badge.ps-fit-tight { background: rgba(245,158,11,0.1); color: #f59e0b; }
-  .ps-tryon-sr-fit-badge.ps-fit-loose { background: rgba(96,165,250,0.1); color: #60a5fa; }
+  .ps-tryon-sr-fc-input::-webkit-outer-spin-button,
+  .ps-tryon-sr-fc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-sr-fc-input:focus { border-color: #bb945c; background: #1a1a1a; }
+  .ps-tryon-sr-fc-unit { font-size: 0.63vw; color: #555; }
 
   /* Compare dropdown */
   .ps-tryon-sr-compare { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "3.20.0",
+  "version": "4.0.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",