@primestyleai/tryon 5.5.20 → 5.5.22

package/dist/react/index.js

@@ -3263,25 +3263,29 @@ const STYLES = `
   .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
   .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }
 
-  /* Scanning line that sweeps top-to-bottom */
+  /* Scanning line that sweeps top-to-bottom — GPU-accelerated.
+     Animating the top property caused first-paint stutter; switched
+     to translate3d so the browser composites on its own layer
+     without re-laying out the viewfinder on every frame. */
   .ps-msc-scanline {
     position: absolute; left: 28px; right: 28px;
-    height: 1.5px; z-index: 3;
+    top: 28px; height: 1.5px; z-index: 3;
     background: linear-gradient(
       to right,
       transparent,
-      rgba(180,220,255,0.85),
-      rgba(180,220,255,0.85),
+      rgba(180,220,255,0.9),
+      rgba(180,220,255,0.9),
       transparent
     );
-    box-shadow: 0 0 8px rgba(180,220,255,0.5);
-    animation: ps-msc-scan 2.6s ease-in-out infinite;
+    will-change: transform, opacity;
+    transform: translate3d(0, 0, 0);
+    animation: ps-msc-scan 2.8s ease-in-out 0.4s infinite;
   }
   @keyframes ps-msc-scan {
-    0%   { top: 28px; opacity: 0; }
-    10%  { opacity: 1; }
-    90%  { opacity: 1; }
-    100% { top: calc(100% - 28px); opacity: 0; }
+    0%   { transform: translate3d(0, 0, 0);                       opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 1; }
+    100% { transform: translate3d(0, min(calc(64vh - 60px), 480px), 0); opacity: 0; }
   }
 
   /* Pose skeleton overlay — sits over the photo */
@@ -3363,14 +3367,20 @@ const STYLES = `
      MultiSectionMobile (.ps-msr-*) — mobile multi-section results
      screen. Eyebrow + product hero + match badge + section list + CTA.
      ════════════════════════════════════════════════════════════════ */
+  /* Layout: header (modal-level) → flex column root → scroll content
+     (flex: 1, overflow-y: auto) → fixed bottom bar (flex-shrink: 0).
+     This is more reliable than position: sticky inside an
+     overflow:auto flex column, which was floating mid-screen. */
   .ps-msr-root {
     display: flex; flex-direction: column;
-    gap: 14px; padding: 4px 4px 100px;
-    /* Fill the modal body and create a self-scrolling region — the
-       outer .ps-bp-root flex chain doesn't propagate scroll past the
-       child level on mobile, so we own scrolling here. */
     height: 100%; min-height: 0;
+    margin: 0 -16px;
+  }
+  .ps-msr-scroll {
+    flex: 1; min-height: 0;
     overflow-y: auto; -webkit-overflow-scrolling: touch;
+    display: flex; flex-direction: column;
+    gap: 14px; padding: 8px 16px 24px;
   }
   .ps-msr-eyebrow {
     font-size: 10px; font-weight: 600;
@@ -3474,16 +3484,13 @@ const STYLES = `
     letter-spacing: -0.01em;
   }
 
-  /* Bottom CTA: sticky to the modal bottom so it's always accessible
-     while the cards above scroll. */
+  /* Fixed bottom action bar — always visible, content scrolls above it */
   .ps-msr-bottom {
-    position: sticky; bottom: 0;
-    margin: 14px -16px 0;
-    padding: 14px 16px;
-    padding-bottom: calc(14px + env(safe-area-inset-bottom));
+    flex-shrink: 0;
     background: var(--ps-bg-primary);
     border-top: 1px solid var(--ps-border-subtle);
-    z-index: 2;
+    padding: 14px 16px;
+    padding-bottom: calc(14px + env(safe-area-inset-bottom));
   }
   .ps-msr-tryon-cta {
     display: flex; align-items: center; justify-content: center; gap: 8px;
@@ -3502,15 +3509,19 @@ const STYLES = `
 
   /* ════════════════════════════════════════════════════════════════
      MobileSectionDetail (.ps-msd-*) — section detail view on mobile.
-     Big product image, big size value, match%, MEASUREMENT BLUEPRINT
-     rows with PERFECT FIT badges, TRY ANOTHER SIZE picker.
-     Self-scrolling — content can be long.
+     Layout: scroll container with rich blueprint rows matching the
+     reference (number prefix, description, USER/SIZE labels, badge).
      ════════════════════════════════════════════════════════════════ */
   .ps-msd-root {
     display: flex; flex-direction: column;
-    gap: 14px; padding: 4px 4px 60px;
     height: 100%; min-height: 0;
+    margin: 0 -16px;
+  }
+  .ps-msd-scroll {
+    flex: 1; min-height: 0;
     overflow-y: auto; -webkit-overflow-scrolling: touch;
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 16px 32px;
   }
   .ps-msd-back {
     background: none; border: none;
@@ -3538,105 +3549,137 @@ const STYLES = `
     object-fit: contain; display: block;
   }
 
-  /* Header: section name + big size + match */
-  .ps-msd-header {
-    display: flex; flex-direction: column; align-items: center;
-    gap: 6px; padding: 14px 0 18px;
-    border-bottom: 1px solid var(--ps-border-subtle);
+  /* RECOMMENDED SIZE / FIT ACCURACY card */
+  .ps-msd-card {
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 12px;
+    padding: 22px 22px 18px;
+    display: flex; flex-direction: column; gap: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
   }
-  .ps-msd-section-name {
-    font-size: 11px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+  .ps-msd-card-eyebrow {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
-  .ps-msd-size-row {
-    display: flex; align-items: baseline; gap: 8px;
+  .ps-msd-card-size-row {
+    display: flex; align-items: baseline; gap: 12px;
+    margin-top: 2px;
   }
-  .ps-msd-size-num {
-    font-size: 64px; font-weight: 700;
+  .ps-msd-card-size {
+    font-size: 56px; font-weight: 700;
     color: var(--ps-text-primary);
     line-height: 1; letter-spacing: -0.02em;
     font-feature-settings: "tnum" 1;
   }
-  .ps-msd-size-len {
-    font-size: 16px; font-weight: 500;
-    color: var(--ps-text-secondary);
+  .ps-msd-card-size-meta {
+    font-size: 12px; font-weight: 600;
+    letter-spacing: 0.05em;
+    color: var(--ps-text-muted);
   }
-  .ps-msd-match {
-    display: flex; align-items: baseline; gap: 5px;
+  .ps-msd-card-divider {
+    height: 1px; background: var(--ps-border-subtle);
+    margin: 6px 0;
+  }
+  .ps-msd-card-pct-row {
+    display: flex; align-items: center; gap: 12px;
+    margin-top: 2px;
   }
-  .ps-msd-match-pct {
-    font-size: 13px; font-weight: 700;
+  .ps-msd-card-pct {
+    font-size: 30px; font-weight: 700;
     color: var(--ps-accent);
-    font-feature-settings: "tnum" 1;
+    line-height: 1; font-feature-settings: "tnum" 1;
   }
-  .ps-msd-match-label {
-    font-size: 10px; font-weight: 600;
-    letter-spacing: 0.12em; text-transform: uppercase;
-    color: var(--ps-text-muted);
+  .ps-msd-card-bar {
+    flex: 1; height: 2px;
+    background: var(--ps-border-color); border-radius: 1px;
+    overflow: hidden;
+  }
+  .ps-msd-card-bar-fill {
+    height: 100%; background: var(--ps-accent);
+    border-radius: 1px;
+  }
+  .ps-msd-card-note {
+    font-size: 11px; color: var(--ps-text-muted);
+    line-height: 1.5; margin: 2px 0 0;
   }
 
-  /* MEASUREMENT BLUEPRINT */
+  /* MEASUREMENT BLUEPRINT — rich rows with number, description, USER/SIZE
+     labeled values, status badge with check icon */
   .ps-msd-blueprint {
-    display: flex; flex-direction: column; gap: 8px;
-    padding-top: 16px;
+    display: flex; flex-direction: column; gap: 6px;
+    padding-top: 6px;
   }
   .ps-msd-blueprint-title {
-    font-size: 11px; font-weight: 700;
-    letter-spacing: 0.16em; text-transform: uppercase;
-    color: var(--ps-text-muted);
-    text-align: center; margin-bottom: 4px;
+    font-size: 13px; font-weight: 800;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    margin-bottom: 0;
+  }
+  .ps-msd-blueprint-underline {
+    width: 36px; height: 2px;
+    background: var(--ps-text-primary);
+    margin-bottom: 8px;
   }
   .ps-msd-rows {
     display: flex; flex-direction: column;
   }
   .ps-msd-row {
-    padding: 16px 4px;
+    display: flex; flex-direction: column;
+    padding: 22px 0 24px;
     border-bottom: 1px solid var(--ps-border-subtle);
   }
   .ps-msd-row:last-child { border-bottom: none; }
-  .ps-msd-row-top {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 8px;
+  .ps-msd-row-num {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    margin-bottom: 4px;
   }
-  .ps-msd-row-label {
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase;
+  .ps-msd-row-desc {
+    font-size: 12px; font-weight: 400;
+    color: var(--ps-text-muted);
+    margin: 0 0 14px;
+    line-height: 1.5;
+  }
+  .ps-msd-row-cells {
+    display: flex; justify-content: space-between; align-items: flex-end;
+    gap: 16px; margin-bottom: 14px;
+  }
+  .ps-msd-row-cell {
+    display: flex; flex-direction: column; gap: 4px;
+    min-width: 0;
+  }
+  .ps-msd-row-cell.ps-right { text-align: right; }
+  .ps-msd-cell-label {
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
+  .ps-msd-cell-value {
+    font-size: 18px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+    line-height: 1.1;
+  }
   .ps-msd-row-badge {
-    font-size: 9px; font-weight: 700;
+    align-self: flex-end;
+    display: inline-flex; align-items: center; gap: 5px;
+    font-size: 10px; font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
-    padding: 4px 9px; border-radius: 999px;
+    white-space: nowrap;
   }
+  .ps-msd-row-badge svg { flex-shrink: 0; }
   .ps-msd-row-badge.ps-good {
-    background: rgba(33, 84, 239, 0.1);
     color: var(--ps-accent);
   }
   .ps-msd-row-badge.ps-tight {
-    background: rgba(220, 38, 38, 0.1);
     color: #dc2626;
   }
   .ps-msd-row-badge.ps-loose {
-    background: rgba(217, 119, 6, 0.1);
     color: #d97706;
   }
-  .ps-msd-row-values {
-    display: flex; gap: 16px;
-  }
-  .ps-msd-row-cell {
-    flex: 1; display: flex; flex-direction: column; gap: 3px;
-  }
-  .ps-msd-cell-label {
-    font-size: 9px; font-weight: 600;
-    letter-spacing: 0.1em; text-transform: uppercase;
-    color: var(--ps-text-muted);
-  }
-  .ps-msd-cell-value {
-    font-size: 16px; font-weight: 600;
-    color: var(--ps-text-primary);
-    font-feature-settings: "tnum" 1;
-  }
 
   /* TRY ANOTHER SIZE picker */
   .ps-msd-sizes {
@@ -4905,58 +4948,60 @@ function MultiSectionMobile({
     return 72;
   }, [sizingResult]);
   return /* @__PURE__ */ jsxs("div", { className: "ps-msr-root", children: [
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-eyebrow", children: t("Sizing Profile") }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msr-product", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-msr-product-img-wrap", children: [
-        /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-msr-product-img" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msr-bookmark", "aria-label": t("Save"), children: /* @__PURE__ */ jsx(BookmarkIcon, {}) })
-      ] }),
-      /* @__PURE__ */ jsx("h2", { className: "ps-msr-product-name", children: productTitle })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-match-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-msr-match", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-msr-match-circle", children: [
-        /* @__PURE__ */ jsxs("svg", { className: "ps-msr-match-ring", viewBox: "0 0 44 44", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "20", fill: "none", stroke: "var(--ps-border-color)", strokeWidth: "3" }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "22",
-              cy: "22",
-              r: "20",
-              fill: "none",
-              stroke: "var(--ps-accent)",
-              strokeWidth: "3",
-              strokeLinecap: "round",
-              strokeDasharray: `${matchPct / 100 * 125.66} 125.66`,
-              transform: "rotate(-90 22 22)"
-            }
-          )
+    /* @__PURE__ */ jsxs("div", { className: "ps-msr-scroll", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msr-eyebrow", children: t("Sizing Profile") }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msr-product", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-msr-product-img-wrap", children: [
+          /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-msr-product-img" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msr-bookmark", "aria-label": t("Save"), children: /* @__PURE__ */ jsx(BookmarkIcon, {}) })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "ps-msr-match-pct", children: [
-          matchPct,
-          "%"
-        ] })
+        /* @__PURE__ */ jsx("h2", { className: "ps-msr-product-name", children: productTitle })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "ps-msr-match-label", children: t("FIT MATCH") })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-sections", children: sectionEntries.map(({ name, secResult }) => {
-      const cleanName = name.replace(/\s*[—–-]\s*.*/g, "");
-      const sec = secResult;
-      const sizeValue = sec.size || secResult.recommendedSize;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ps-msr-section-card",
-          onClick: () => onSelectSection(name),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
-            /* @__PURE__ */ jsx("span", { className: "ps-msr-section-size", children: sizeValue })
-          ]
-        },
-        name
-      );
-    }) }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msr-match-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-msr-match", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-msr-match-circle", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "ps-msr-match-ring", viewBox: "0 0 44 44", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "20", fill: "none", stroke: "var(--ps-border-color)", strokeWidth: "3" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "22",
+                cy: "22",
+                r: "20",
+                fill: "none",
+                stroke: "var(--ps-accent)",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeDasharray: `${matchPct / 100 * 125.66} 125.66`,
+                transform: "rotate(-90 22 22)"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "ps-msr-match-pct", children: [
+            matchPct,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msr-match-label", children: t("FIT MATCH") })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msr-sections", children: sectionEntries.map(({ name, secResult }) => {
+        const cleanName = name.replace(/\s*[—–-]\s*.*/g, "");
+        const sec = secResult;
+        const sizeValue = sec.size || secResult.recommendedSize;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ps-msr-section-card",
+            onClick: () => onSelectSection(name),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
+              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-size", children: sizeValue })
+            ]
+          },
+          name
+        );
+      }) })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-msr-bottom", children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -5343,51 +5388,88 @@ function SectionDetailView({
   const finalDisplayLength = selectedLength || backendLength;
   const finalAllSizes = backendAvailableSizes.length > 0 ? backendAvailableSizes : allSizes;
   if (isMobileProp) {
-    const cleanSectionName = sectionName.replace(/\s*[—–-]\s*.*/g, "");
-    const fitBadgeLabel = (fit) => fit === "good" ? t("PERFECT FIT") : fit.includes("a-bit-tight") ? t("SLIGHTLY TIGHT") : fit.includes("a-bit-loose") ? t("SLIGHTLY LOOSE") : fit.includes("tight") ? t("TIGHT") : fit.includes("loose") ? t("LOOSE") : t("FIT");
-    return /* @__PURE__ */ jsxs("div", { className: "ps-msd-root", children: [
+    sectionName.replace(/\s*[—–-]\s*.*/g, "");
+    const measurementDesc = (area) => {
+      const a = area.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim();
+      if (a.includes("chest") || a.includes("bust")) return t("Full circumference at the widest point.");
+      if (a.includes("waist")) return t("Circumference at the natural waistline.");
+      if (a.includes("hip")) return t("Circumference at the fullest point.");
+      if (a.includes("shoulder")) return t("Shoulder edge to shoulder edge.");
+      if (a.includes("sleeve") || a.includes("arm")) return t("Shoulder seam to cuff edge.");
+      if (a.includes("neck") || a.includes("collar")) return t("Around the base of the neck.");
+      if (a.includes("inseam") || a.includes("inside leg")) return t("Inner leg seam length.");
+      if (a.includes("thigh")) return t("Circumference around the upper leg.");
+      if (a.includes("length") || a.includes("height")) return t("Top to bottom length.");
+      return "";
+    };
+    const fitBadgeLabel = (fit, isLen) => {
+      if (isLen && fit === "good") return t("EDITORIAL LENGTH");
+      if (fit === "good") return t("PERFECT TENSION");
+      if (fit === "a-bit-tight") return t("SLIGHTLY TIGHT");
+      if (fit === "a-bit-loose") return t("SLIGHT EASE");
+      if (fit.includes("tight")) return t("TIGHT");
+      if (fit.includes("loose")) return t("LOOSE");
+      return t("FIT");
+    };
+    return /* @__PURE__ */ jsx("div", { className: "ps-msd-root", children: /* @__PURE__ */ jsxs("div", { className: "ps-msd-scroll", children: [
       /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-msd-back", onClick: onBack, children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-back-arrow", children: "←" }),
         " ",
         t("Back to sections")
       ] }),
       productImage && /* @__PURE__ */ jsx("div", { className: "ps-msd-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle || "", className: "ps-msd-image-img" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-msd-header", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msd-section-name", children: cleanSectionName.toUpperCase() }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-msd-size-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-msd-size-num", children: backendSize }),
-          finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-size-len", children: finalDisplayLength })
+      /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("RECOMMENDED SIZE") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-size-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: backendSize }),
+          finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-msd-match", children: [
-          /* @__PURE__ */ jsxs("span", { className: "ps-msd-match-pct", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-card-divider" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("FIT ACCURACY") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-pct-row", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-pct", children: [
             matchPercent,
             "%"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "ps-msd-match-label", children: t("FIT MATCH") })
-        ] })
+          /* @__PURE__ */ jsx("div", { className: "ps-msd-card-bar", children: /* @__PURE__ */ jsx("div", { className: "ps-msd-card-bar-fill", style: { width: `${matchPercent}%` } }) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "ps-msd-card-note", children: t("Based on your measurements and the garment's tailoring chart.") })
       ] }),
       fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-blueprint", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-blueprint-title", children: t("MEASUREMENT BLUEPRINT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-blueprint-underline" }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-rows", children: fitRows.map((row, i) => {
           const fitClass = row.fit === "good" ? "ps-good" : row.fit.includes("tight") ? "ps-tight" : "ps-loose";
+          const desc = measurementDesc(row.area);
+          const idxLbl = String(i + 1).padStart(2, "0");
           return /* @__PURE__ */ jsxs("div", { className: "ps-msd-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-top", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-msd-row-label", children: row.area.toUpperCase() }),
-              /* @__PURE__ */ jsx("span", { className: `ps-msd-row-badge ${fitClass}`, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitBadgeLabel(row.fit) })
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-num", children: [
+              idxLbl,
+              " ",
+              row.area.toUpperCase()
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-values", children: [
+            desc && /* @__PURE__ */ jsx("p", { className: "ps-msd-row-desc", children: desc }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cells", children: [
               /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("YOU") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("USER") }),
                 /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-value", children: [
                   row.userNum,
                   " ",
                   unitLbl
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("GARMENT") }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
+                /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
+                  t("SIZE"),
+                  " ",
+                  backendSize
+                ] }),
                 /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: row.chartLabel })
               ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `ps-msd-row-badge ${fitClass}`, children: [
+              row.isLength ? lengthFitLabelFn(row.fit, t).toUpperCase() : fitBadgeLabel(row.fit, row.isLength),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "11", height: "11", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 5" }) })
             ] })
           ] }, i);
         }) })
@@ -5424,7 +5506,7 @@ function SectionDetailView({
           );
         }) })
       ] })
-    ] });
+    ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", style: { padding: "1.5vw", display: "flex", flexDirection: "column", height: "100%", background: "#F8F9FA" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [