@primestyleai/tryon 5.5.10 → 5.5.12

package/dist/react/index.js

@@ -2971,125 +2971,236 @@ const STYLES = `
     border-bottom-color: var(--ps-accent);
   }
 
-  /* Field rows — minimal, compact, with thin slider underneath */
+  /* Slider rows — label top-left, value top-right, then [-] [track] [+] */
   .ps-bpm-fields {
     display: flex; flex-direction: column;
     margin-top: 4px;
   }
   .ps-bpm-row {
     display: flex; flex-direction: column;
-    padding: 12px 4px 14px;
-    gap: 8px;
+    padding: 14px 4px;
+    gap: 12px;
     border-bottom: 1px solid var(--ps-border-subtle);
   }
   .ps-bpm-row:last-child { border-bottom: none; }
   .ps-bpm-row-top {
-    display: flex; align-items: baseline; gap: 14px;
+    display: flex; align-items: center; justify-content: space-between;
   }
   .ps-bpm-label {
-    flex: 0 0 64px;
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.1em; text-transform: uppercase;
+    font-size: 11px; font-weight: 600;
+    letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
-  .ps-bpm-value-group {
-    flex: 1; display: flex; align-items: baseline; gap: 4px;
-    justify-content: flex-start;
+  .ps-bpm-value-display {
+    font-size: 14px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+
+  /* Slider row container: [-] [track] [+] */
+  .ps-bpm-slider-row {
+    display: flex; align-items: center; gap: 12px;
+  }
+  .ps-bpm-step-btn {
+    flex-shrink: 0;
+    width: 34px; height: 34px; border-radius: 50%;
+    background: var(--ps-bg-tertiary); border: none;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    color: var(--ps-text-secondary);
+    transition: background 0.15s, transform 0.1s;
   }
+  .ps-bpm-step-btn:hover { background: var(--ps-border-color); }
+  .ps-bpm-step-btn:active { transform: scale(0.92); }
 
-  /* Minimal slider — 2px track, 12px accent thumb, no shadows */
+  /* The slider — thicker track, dark navy thumb, monochrome */
   .ps-bpm-slider {
     -webkit-appearance: none; appearance: none;
-    width: 100%; height: 2px; outline: none;
+    flex: 1; min-width: 0;
+    height: 4px; outline: none;
     background: linear-gradient(
       to right,
-      var(--ps-accent) 0%,
-      var(--ps-accent) var(--ps-pct, 0%),
+      var(--ps-text-primary) 0%,
+      var(--ps-text-primary) var(--ps-pct, 0%),
       var(--ps-border-color) var(--ps-pct, 0%),
       var(--ps-border-color) 100%
     );
-    border-radius: 2px; cursor: pointer;
-    margin: 0 0 0 80px; /* indent under the value, past the label */
+    border-radius: 999px; cursor: pointer;
+    margin: 0;
   }
   .ps-bpm-slider::-webkit-slider-thumb {
     -webkit-appearance: none; appearance: none;
-    width: 12px; height: 12px; border-radius: 50%;
-    background: var(--ps-accent); border: none;
+    width: 18px; height: 18px; border-radius: 50%;
+    background: var(--ps-text-primary); border: none;
     cursor: grab; transition: transform 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
   }
-  .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
+  .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
   .ps-bpm-slider::-moz-range-thumb {
-    width: 12px; height: 12px; border-radius: 50%;
-    background: var(--ps-accent); border: none; cursor: grab;
+    width: 18px; height: 18px; border-radius: 50%;
+    background: var(--ps-text-primary); border: none; cursor: grab;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
   }
-  .ps-bpm-slider::-moz-range-track { background: transparent; height: 2px; }
-  .ps-bpm-input {
-    background: transparent; border: none; outline: none;
-    font-family: inherit;
-    font-size: 20px; font-weight: 600;
-    color: var(--ps-text-primary);
-    padding: 0; margin: 0;
-    width: auto; min-width: 0;
-    field-sizing: content;
-    max-width: 4ch;
-  }
-  .ps-bpm-input::-webkit-outer-spin-button,
-  .ps-bpm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-  .ps-bpm-input[type="number"] { -moz-appearance: textfield; }
-  .ps-bpm-input::placeholder { color: var(--ps-border-color); }
-  .ps-bpm-input:focus { outline: none; }
-  .ps-bpm-unit {
-    font-size: 11px; font-weight: 500;
+  .ps-bpm-slider::-moz-range-track { background: transparent; height: 4px; }
+
+  /* "or" divider — flanked by hairlines */
+  .ps-bpm-or {
+    display: flex; align-items: center; gap: 12px;
+    margin: 14px 4px 4px;
+  }
+  .ps-bpm-or::before, .ps-bpm-or::after {
+    content: ""; flex: 1; height: 1px;
+    background: var(--ps-border-subtle);
+  }
+  .ps-bpm-or span {
+    font-size: 10px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.16em;
     color: var(--ps-text-muted);
-    margin-left: 1px; flex-shrink: 0;
   }
 
-  /* RECOMMENDED upload card — compact */
-  .ps-bpm-photo-card {
-    display: flex; align-items: center; gap: 12px;
-    background: #1C1D1E; color: #FFFFFF;
-    border: none; border-radius: 10px;
-    padding: 10px 14px; margin-top: 6px;
+  /* Minimal upload link — no card, no background, just text + icons */
+  .ps-bpm-upload-link {
+    display: flex; align-items: center; justify-content: center; gap: 10px;
+    background: none; border: none;
+    padding: 8px 4px; margin: 0;
     cursor: pointer; font-family: inherit;
-    text-align: left; width: 100%;
-    transition: transform 0.15s ease;
+    color: var(--ps-text-primary); font-size: 13px; font-weight: 500;
+    width: 100%;
+    transition: opacity 0.15s;
   }
-  .ps-bpm-photo-card:active { transform: scale(0.98); }
-  .ps-bpm-photo-card-icon {
-    flex-shrink: 0;
-    width: 32px; height: 32px; border-radius: 7px;
-    background: rgba(255,255,255,0.08);
+  .ps-bpm-upload-link:hover { opacity: 0.7; }
+  .ps-bpm-upload-link svg { color: var(--ps-text-secondary); flex-shrink: 0; }
+
+  .ps-bpm-error {
+    font-size: 11px; color: var(--ps-error-color);
+    text-align: center; margin: 4px 0 0;
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     PhotoStepMobile (.ps-pm-*) — AI scan / photo upload step.
+     Title + subtitle, large photo preview, "Checklist for accuracy"
+     card, dark primary CTA, outlined RETAKE secondary, bottom tabs.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-pm-root {
+    display: flex; flex-direction: column;
+    gap: 14px; padding: 8px 4px 0;
+    flex: 1; min-height: 0;
+  }
+  .ps-pm-header { margin: 4px 0 0; }
+  .ps-pm-title {
+    font-size: 22px; font-weight: 700; color: var(--ps-text-primary);
+    margin: 0 0 6px; line-height: 1.25;
+  }
+  .ps-pm-subtitle {
+    font-size: 13px; color: var(--ps-text-muted);
+    margin: 0; line-height: 1.45; font-weight: 400;
+  }
+
+  /* Photo preview / upload zone */
+  .ps-pm-preview {
+    background: var(--ps-bg-tertiary);
+    border-radius: 10px;
+    height: 280px;
+    overflow: hidden;
     display: flex; align-items: center; justify-content: center;
-    color: #FFFFFF;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .ps-pm-preview-img {
+    width: 100%; height: 100%; object-fit: cover; display: block;
   }
-  .ps-bpm-photo-card-icon svg { width: 16px; height: 16px; }
-  .ps-bpm-photo-card-content {
-    flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
+  .ps-pm-preview-empty {
+    display: flex; flex-direction: column; align-items: center;
+    gap: 6px; padding: 24px;
+    background: none; border: none;
+    color: var(--ps-text-muted); cursor: pointer;
+    font-family: inherit; width: 100%; height: 100%;
   }
-  .ps-bpm-photo-card-badge {
-    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
-    color: rgba(255,255,255,0.55);
+  .ps-pm-preview-empty svg { color: var(--ps-text-muted); }
+  .ps-pm-preview-empty-title {
+    font-size: 14px; font-weight: 600; color: var(--ps-text-secondary);
+    margin-top: 4px;
   }
-  .ps-bpm-photo-card-text {
-    font-size: 13px; font-weight: 500; color: #FFFFFF;
+  .ps-pm-preview-empty-hint {
+    font-size: 11px; color: var(--ps-text-muted);
   }
-  .ps-bpm-photo-card-arrow {
-    flex-shrink: 0; color: rgba(255,255,255,0.6);
-    display: flex; align-items: center;
+  .ps-pm-preview-remove {
+    position: absolute; top: 10px; right: 10px;
+    width: 28px; height: 28px; border-radius: 6px;
+    background: rgba(255,255,255,0.9); border: none;
+    color: var(--ps-text-primary); cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+    transition: background 0.15s;
   }
-  .ps-bpm-photo-card-arrow svg { width: 16px; height: 16px; }
+  .ps-pm-preview-remove:hover { background: #FFFFFF; }
 
-  /* Helper hint */
-  .ps-bpm-hint {
-    font-size: 10px; color: var(--ps-text-muted);
-    text-align: center; margin: 2px 8px 0; line-height: 1.5;
-    font-style: italic;
+  /* Checklist for accuracy card */
+  .ps-pm-checklist {
+    display: flex; gap: 12px;
+    padding: 12px 14px;
+    background: var(--ps-bg-secondary);
+    border-radius: 10px;
+    border: 1px solid var(--ps-border-subtle);
   }
-  .ps-bpm-error {
-    font-size: 11px; color: var(--ps-error-color);
-    text-align: center; margin: 4px 0 0;
+  .ps-pm-checklist-icon {
+    flex-shrink: 0;
+    width: 22px; height: 22px;
+    color: var(--ps-text-primary);
+    display: flex; align-items: center; justify-content: center;
+    margin-top: 1px;
+  }
+  .ps-pm-checklist-body { flex: 1; min-width: 0; }
+  .ps-pm-checklist-title {
+    font-size: 12px; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin-bottom: 5px;
+  }
+  .ps-pm-checklist-items {
+    list-style: none; padding: 0; margin: 0;
+  }
+  .ps-pm-checklist-items li {
+    font-size: 11px; color: var(--ps-text-secondary);
+    padding: 1px 0 1px 12px;
+    position: relative; line-height: 1.5;
+  }
+  .ps-pm-checklist-items li::before {
+    content: "•"; position: absolute; left: 2px;
+    color: var(--ps-text-muted);
   }
 
+  /* Primary dark CTA: ANALYZE MY SIZE */
+  .ps-pm-primary-btn {
+    margin: 0 16px; width: calc(100% - 32px);
+    background: var(--ps-text-primary); color: #FFFFFF;
+    border: none; border-radius: 8px;
+    padding: 16px 18px;
+    font-family: inherit; font-size: 13px; font-weight: 700;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    cursor: pointer;
+    transition: opacity 0.15s, transform 0.15s;
+  }
+  .ps-pm-primary-btn:active { transform: scale(0.98); }
+  .ps-pm-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  /* Outlined secondary: RETAKE PHOTO */
+  .ps-pm-secondary-btn {
+    margin: 8px 16px 12px; width: calc(100% - 32px);
+    background: transparent; color: var(--ps-text-secondary);
+    border: 1px solid var(--ps-border-color); border-radius: 8px;
+    padding: 13px 18px;
+    font-family: inherit; font-size: 11px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .ps-pm-secondary-btn:hover { background: var(--ps-bg-secondary); }
+
+  /* When the bottom action area contains the primary button (photo step),
+     it needs different padding than the basics step (which has the next btn
+     baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. */
+  .ps-bpm-bottom .ps-pm-primary-btn { margin: 14px 16px 0; }
+
   /* Bottom action area — Next button + tab bar grouped together,
      pushed to the bottom of the modal body by .ps-bpm-spacer above. */
   .ps-bpm-bottom {
@@ -3516,7 +3627,7 @@ function ClockIcon({ size = 16 }) {
     /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
   ] });
 }
-function RulerIcon({ size = 18 }) {
+function RulerIcon$1({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z" }),
     /* @__PURE__ */ jsx("path", { d: "m14.5 12.5 2-2" }),
@@ -3534,7 +3645,7 @@ function TrashIcon({ size = 14 }) {
     /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
   ] });
 }
-function ChevronRightIcon$1() {
+function ChevronRightIcon() {
   return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) });
 }
 function CheckIcon({ size = 14 }) {
@@ -3864,7 +3975,7 @@ function DrawerPanel({
             p.heightCm ? ` · ${Math.round(p.heightCm)}${t("cm")}` : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsx(ChevronRightIcon$1, {})
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
       ] }, p.id))
     ] }) : /* @__PURE__ */ jsx(Fragment, { children: history.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: t("No history yet.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       history.map((entry, idx) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-item ps-tryon-history-clickable", onClick: () => restoreHistory(entry), children: [
@@ -3976,7 +4087,7 @@ function WelcomeView({
       /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get the perfect fit, then try it on virtually") })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
-      { icon: /* @__PURE__ */ jsx(RulerIcon, { size: 22 }), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
+      { icon: /* @__PURE__ */ jsx(RulerIcon$1, { size: 22 }), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
       { icon: /* @__PURE__ */ jsx(CameraIcon, { size: 22 }), title: t("Try It On"), desc: t("See how it looks on you") }
     ].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
@@ -5416,25 +5527,62 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
-function CameraSmallIcon({ size = 18 }) {
+function RulerIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
+        onClick: onSwitchToManual,
+        children: [
+          /* @__PURE__ */ jsx(RulerIcon, {}),
+          t("MANUAL FIT")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
+        onClick: onSwitchToScan,
+        children: [
+          /* @__PURE__ */ jsx(ScanIcon, {}),
+          t("AI SCAN")
+        ]
+      }
+    )
+  ] });
+}
+function CameraSmallIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
   ] });
 }
-function ChevronRightIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "18", height: "18", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+function ChevronRight() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
 }
-function RulerIconSmall() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
-  ] });
+function MinusIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", width: "14", height: "14", children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
 }
-function ScanIconSmall() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+function PlusIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", width: "14", height: "14", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" })
   ] });
 }
 function BasicsStepMobile({
@@ -5462,14 +5610,36 @@ function BasicsStepMobile({
 }) {
   const heightCm = parseFloat(height) || 173;
   const heightInTotal = (parseFloat(heightFeet) || 5) * 12 + (parseFloat(heightInches) || 8);
+  const ftDisplay = Math.floor(heightInTotal / 12);
+  const inDisplay = heightInTotal % 12;
   const weightNum = parseFloat(weight) || (wUnit === "kg" ? 70 : 154);
   const ageNum = parseFloat(age) || 30;
-  const wMax = wUnit === "kg" ? 200 : 440;
   const wMinFix = wUnit === "kg" ? 30 : 66;
-  const pctHCm = (heightCm - 120) / (220 - 120) * 100;
-  const pctHIn = (heightInTotal - 48) / (84 - 48) * 100;
+  const wMax = wUnit === "kg" ? 200 : 440;
+  const hCmMin = 120, hCmMax = 220;
+  const hInMin = 48, hInMax = 84;
+  const ageMin = 13, ageMax = 100;
+  const pctHCm = (heightCm - hCmMin) / (hCmMax - hCmMin) * 100;
+  const pctHIn = (heightInTotal - hInMin) / (hInMax - hInMin) * 100;
   const pctW = (weightNum - wMinFix) / (wMax - wMinFix) * 100;
-  const pctA = (ageNum - 13) / (100 - 13) * 100;
+  const pctA = (ageNum - ageMin) / (ageMax - ageMin) * 100;
+  const setHeightTotalIn = (totalIn) => {
+    const v = Math.max(hInMin, Math.min(hInMax, totalIn));
+    setHeightFeet(String(Math.floor(v / 12)));
+    setHeightInches(String(v % 12));
+  };
+  const incHeight = () => {
+    if (hUnit === "in") setHeightTotalIn(heightInTotal + 1);
+    else setHeight(String(Math.min(hCmMax, heightCm + 1)));
+  };
+  const decHeight = () => {
+    if (hUnit === "in") setHeightTotalIn(heightInTotal - 1);
+    else setHeight(String(Math.max(hCmMin, heightCm - 1)));
+  };
+  const incWeight = () => setWeight(String(Math.min(wMax, weightNum + 1)));
+  const decWeight = () => setWeight(String(Math.max(wMinFix, weightNum - 1)));
+  const incAge = () => setAge(String(Math.min(ageMax, ageNum + 1)));
+  const decAge = () => setAge(String(Math.max(ageMin, ageNum - 1)));
   return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-header", children: [
       /* @__PURE__ */ jsx("h2", { className: "ps-bpm-title", children: t("Let's find your best fit") }),
@@ -5499,168 +5669,107 @@ function BasicsStepMobile({
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("HEIGHT") }),
-          hUnit === "in" ? /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-bpm-input",
-                value: heightFeet,
-                onChange: (e) => setHeightFeet(e.target.value),
-                min: 3,
-                max: 8,
-                placeholder: "5"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: "ft" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-bpm-input",
-                value: heightInches,
-                onChange: (e) => setHeightInches(e.target.value),
-                min: 0,
-                max: 11,
-                placeholder: "8"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: "in" })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-bpm-input",
-                value: height,
-                onChange: (e) => setHeight(e.target.value),
-                min: 100,
-                max: 250,
-                placeholder: "173"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: "cm" })
-          ] })
+          /* @__PURE__ */ jsx("span", { className: "ps-bpm-value-display", children: hUnit === "in" ? `${ftDisplay}ft ${inDisplay}in` : `${Math.round(heightCm)} cm` })
         ] }),
-        hUnit === "in" ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            className: "ps-bpm-slider",
-            min: 48,
-            max: 84,
-            step: 1,
-            value: heightInTotal,
-            onChange: (e) => {
-              const v = parseInt(e.target.value, 10);
-              setHeightFeet(String(Math.floor(v / 12)));
-              setHeightInches(String(v % 12));
-            },
-            style: { ["--ps-pct"]: `${pctHIn}%` }
-          }
-        ) : /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            className: "ps-bpm-slider",
-            min: 120,
-            max: 220,
-            step: 1,
-            value: heightCm,
-            onChange: (e) => setHeight(e.target.value),
-            style: { ["--ps-pct"]: `${pctHCm}%` }
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-slider-row", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: decHeight, "aria-label": t("Decrease"), children: /* @__PURE__ */ jsx(MinusIcon, {}) }),
+          hUnit === "in" ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ps-bpm-slider",
+              min: hInMin,
+              max: hInMax,
+              step: 1,
+              value: heightInTotal,
+              onChange: (e) => setHeightTotalIn(parseInt(e.target.value, 10)),
+              style: { ["--ps-pct"]: `${pctHIn}%` }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ps-bpm-slider",
+              min: hCmMin,
+              max: hCmMax,
+              step: 1,
+              value: heightCm,
+              onChange: (e) => setHeight(e.target.value),
+              style: { ["--ps-pct"]: `${pctHCm}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: incHeight, "aria-label": t("Increase"), children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("WEIGHT") }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-bpm-input",
-                value: weight,
-                onChange: (e) => setWeight(e.target.value),
-                min: wUnit === "kg" ? 30 : 66,
-                max: wUnit === "kg" ? 300 : 660,
-                placeholder: wUnit === "kg" ? "70" : "154"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: wUnit })
+          /* @__PURE__ */ jsxs("span", { className: "ps-bpm-value-display", children: [
+            Math.round(weightNum),
+            " ",
+            wUnit.toUpperCase()
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            className: "ps-bpm-slider",
-            min: wMinFix,
-            max: wMax,
-            step: 1,
-            value: weightNum,
-            onChange: (e) => setWeight(e.target.value),
-            style: { ["--ps-pct"]: `${pctW}%` }
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-slider-row", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: decWeight, "aria-label": t("Decrease"), children: /* @__PURE__ */ jsx(MinusIcon, {}) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ps-bpm-slider",
+              min: wMinFix,
+              max: wMax,
+              step: 1,
+              value: weightNum,
+              onChange: (e) => setWeight(e.target.value),
+              style: { ["--ps-pct"]: `${pctW}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: incWeight, "aria-label": t("Increase"), children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("AGE") }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-bpm-input",
-                value: age,
-                onChange: (e) => setAge(e.target.value),
-                min: 13,
-                max: 100,
-                placeholder: "30"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: t("years") })
+          /* @__PURE__ */ jsxs("span", { className: "ps-bpm-value-display", children: [
+            Math.round(ageNum),
+            " ",
+            t("YEARS")
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            className: "ps-bpm-slider",
-            min: 13,
-            max: 100,
-            step: 1,
-            value: ageNum,
-            onChange: (e) => setAge(e.target.value),
-            style: { ["--ps-pct"]: `${pctA}%` }
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-slider-row", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: decAge, "aria-label": t("Decrease"), children: /* @__PURE__ */ jsx(MinusIcon, {}) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ps-bpm-slider",
+              min: ageMin,
+              max: ageMax,
+              step: 1,
+              value: ageNum,
+              onChange: (e) => setAge(e.target.value),
+              style: { ["--ps-pct"]: `${pctA}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bpm-step-btn", onClick: incAge, "aria-label": t("Increase"), children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+        ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-or", children: /* @__PURE__ */ jsx("span", { children: t("or") }) }),
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: "ps-bpm-photo-card",
+        className: "ps-bpm-upload-link",
         onClick: onUploadPhoto,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-bpm-photo-card-icon", children: /* @__PURE__ */ jsx(CameraSmallIcon, { size: 20 }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-bpm-photo-card-content", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-photo-card-badge", children: t("RECOMMENDED") }),
-            /* @__PURE__ */ jsx("span", { className: "ps-bpm-photo-card-text", children: t("Upload a photo for AI sizing") })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ps-bpm-photo-card-arrow", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+          /* @__PURE__ */ jsx(CameraSmallIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: t("Upload a photo for AI sizing") }),
+          /* @__PURE__ */ jsx(ChevronRight, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "ps-bpm-hint", children: t("Enter accurate height for better fit recommendations") }),
     error && /* @__PURE__ */ jsx("p", { className: "ps-bpm-error", children: error }),
     /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
@@ -5674,33 +5783,129 @@ function BasicsStepMobile({
           children: t("Next")
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "ps-bpm-bottom-tab ps-active",
-            onClick: () => {
-            },
-            children: [
-              /* @__PURE__ */ jsx(RulerIconSmall, {}),
-              t("MANUAL FIT")
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "ps-bpm-bottom-tab",
-            onClick: onSwitchToScan,
-            children: [
-              /* @__PURE__ */ jsx(ScanIconSmall, {}),
-              t("AI SCAN")
-            ]
-          }
-        )
+      /* @__PURE__ */ jsx(
+        MobileBottomTabs,
+        {
+          mode: "manual",
+          onSwitchToManual: () => {
+          },
+          onSwitchToScan,
+          t
+        }
+      )
+    ] })
+  ] });
+}
+function UploadIconLg() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+  ] });
+}
+function InfoIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) });
+}
+function CloseIconSm() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function PhotoStepMobile({
+  photoPreview,
+  handlePhotoSelect,
+  handleRemovePhoto,
+  onAnalyze,
+  onSwitchToManual,
+  error,
+  t
+}) {
+  const fileRef = useRef(null);
+  const hasPhoto = !!photoPreview;
+  return /* @__PURE__ */ jsxs("div", { className: "ps-pm-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-pm-header", children: [
+      /* @__PURE__ */ jsx("h2", { className: "ps-pm-title", children: t("Review your photo") }),
+      /* @__PURE__ */ jsx("p", { className: "ps-pm-subtitle", children: t("Ensure your full body is visible for the most accurate digital tailoring scan.") })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handlePhotoSelect,
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ps-pm-preview", children: hasPhoto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("img", { src: photoPreview, alt: t("Your photo"), className: "ps-pm-preview-img" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-pm-preview-remove",
+          onClick: handleRemovePhoto,
+          "aria-label": t("Remove photo"),
+          children: /* @__PURE__ */ jsx(CloseIconSm, {})
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ps-pm-preview-empty",
+        onClick: () => fileRef.current?.click(),
+        children: [
+          /* @__PURE__ */ jsx(UploadIconLg, {}),
+          /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-title", children: t("Tap to upload") }),
+          /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-hint", children: t("JPEG, PNG up to 10MB") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-pm-checklist", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-pm-checklist-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-title", children: t("Checklist for accuracy") }),
+        /* @__PURE__ */ jsxs("ul", { className: "ps-pm-checklist-items", children: [
+          /* @__PURE__ */ jsx("li", { children: t("Form-fitting clothing is recommended") }),
+          /* @__PURE__ */ jsx("li", { children: t("Standing 2-3 meters from camera") }),
+          /* @__PURE__ */ jsx("li", { children: t("Neutral background with good lighting") })
+        ] })
       ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "ps-bpm-error", children: error }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-pm-primary-btn",
+          onClick: onAnalyze,
+          disabled: !hasPhoto,
+          children: t("ANALYZE MY SIZE")
+        }
+      ),
+      hasPhoto && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-pm-secondary-btn",
+          onClick: () => fileRef.current?.click(),
+          children: t("RETAKE PHOTO")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MobileBottomTabs,
+        {
+          mode: "scan",
+          onSwitchToManual,
+          onSwitchToScan: () => {
+          },
+          t
+        }
+      )
     ] })
   ] });
 }
@@ -6066,6 +6271,20 @@ function BodyProfileView({
   const canProceed = step === "basics" ? true : step === "chest" ? !!chestProfile : step === "midsection" ? !!midsectionProfile : step === "seat" ? !!seatProfile : step === "hips" ? !!hipProfile : step === "bra" ? !!(bandSize && cupSize) : step === "photo" ? true : false;
   const isLastStep = step === steps[steps.length - 1];
   if (step === "photo") {
+    if (isMobile) {
+      return /* @__PURE__ */ jsx("div", { className: "ps-bp-wrapper", children: /* @__PURE__ */ jsx(
+        PhotoStepMobile,
+        {
+          photoPreview,
+          handlePhotoSelect,
+          handleRemovePhoto,
+          onAnalyze: handleNext,
+          onSwitchToManual: () => setStep("basics"),
+          error,
+          t
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsxs("div", { className: "ps-bp-wrapper", children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "1.5vw", width: "100%", height: "100%", minHeight: "20vw", alignItems: "stretch" }, children: [
         /* @__PURE__ */ jsx(
@@ -6146,7 +6365,31 @@ function BodyProfileView({
         ] })
       ] }),
       /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handlePhotoSelect, style: { display: "none" } }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
+      isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-bpm-next-btn",
+              onClick: handleNext,
+              disabled: !photoPreview,
+              children: t("Analyze My Size")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MobileBottomTabs,
+            {
+              mode: "scan",
+              onSwitchToManual: () => setStep("basics"),
+              onSwitchToScan: () => {
+              },
+              t
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
         /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
           " ",