@primestyleai/tryon 5.5.9 → 5.5.11

package/dist/react/index.js

@@ -2940,7 +2940,9 @@ const STYLES = `
   .ps-bpm-root {
     display: flex; flex-direction: column;
     gap: 10px; padding: 8px 4px 0;
+    flex: 1; min-height: 0;
   }
+  .ps-bpm-spacer { flex: 1 1 auto; min-height: 8px; }
   .ps-bpm-header { text-align: center; margin: 4px 0 0; }
   .ps-bpm-title {
     font-size: 18px; font-weight: 700; color: var(--ps-text-primary);
@@ -2969,110 +2971,141 @@ const STYLES = `
     border-bottom-color: var(--ps-accent);
   }
 
-  /* Field rows — minimal, compact */
+  /* 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; align-items: baseline;
+    display: flex; flex-direction: column;
     padding: 14px 4px;
-    gap: 14px;
+    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: 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-input {
-    background: transparent; border: none; outline: none;
-    font-family: inherit;
-    font-size: 20px; font-weight: 600;
+  .ps-bpm-value-display {
+    font-size: 14px; font-weight: 700;
     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;
-    color: var(--ps-text-muted);
-    margin-left: 1px; flex-shrink: 0;
+    font-feature-settings: "tnum" 1;
   }
 
-  /* RECOMMENDED upload card — compact */
-  .ps-bpm-photo-card {
+  /* Slider row container: [-] [track] [+] */
+  .ps-bpm-slider-row {
     display: flex; align-items: center; gap: 12px;
-    background: #1C1D1E; color: #FFFFFF;
-    border: none; border-radius: 10px;
-    padding: 10px 14px; margin-top: 6px;
-    cursor: pointer; font-family: inherit;
-    text-align: left; width: 100%;
-    transition: transform 0.15s ease;
   }
-  .ps-bpm-photo-card:active { transform: scale(0.98); }
-  .ps-bpm-photo-card-icon {
+  .ps-bpm-step-btn {
     flex-shrink: 0;
-    width: 32px; height: 32px; border-radius: 7px;
-    background: rgba(255,255,255,0.08);
+    width: 34px; height: 34px; border-radius: 50%;
+    background: var(--ps-bg-tertiary); border: none;
     display: flex; align-items: center; justify-content: center;
-    color: #FFFFFF;
-  }
-  .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;
+    cursor: pointer;
+    color: var(--ps-text-secondary);
+    transition: background 0.15s, transform 0.1s;
   }
-  .ps-bpm-photo-card-badge {
-    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
-    color: rgba(255,255,255,0.55);
+  .ps-bpm-step-btn:hover { background: var(--ps-border-color); }
+  .ps-bpm-step-btn:active { transform: scale(0.92); }
+
+  /* The slider — thicker track, dark navy thumb, monochrome */
+  .ps-bpm-slider {
+    -webkit-appearance: none; appearance: none;
+    flex: 1; min-width: 0;
+    height: 4px; outline: none;
+    background: linear-gradient(
+      to right,
+      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: 999px; cursor: pointer;
+    margin: 0;
+  }
+  .ps-bpm-slider::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: 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.1); }
+  .ps-bpm-slider::-moz-range-thumb {
+    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: 4px; }
+
+  /* "or" divider — flanked by hairlines */
+  .ps-bpm-or {
+    display: flex; align-items: center; gap: 12px;
+    margin: 14px 4px 4px;
   }
-  .ps-bpm-photo-card-text {
-    font-size: 13px; font-weight: 500; color: #FFFFFF;
+  .ps-bpm-or::before, .ps-bpm-or::after {
+    content: ""; flex: 1; height: 1px;
+    background: var(--ps-border-subtle);
   }
-  .ps-bpm-photo-card-arrow {
-    flex-shrink: 0; color: rgba(255,255,255,0.6);
-    display: flex; align-items: center;
+  .ps-bpm-or span {
+    font-size: 10px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.16em;
+    color: var(--ps-text-muted);
   }
-  .ps-bpm-photo-card-arrow svg { width: 16px; height: 16px; }
 
-  /* 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;
+  /* 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;
+    color: var(--ps-text-primary); font-size: 13px; font-weight: 500;
+    width: 100%;
+    transition: opacity 0.15s;
   }
+  .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;
   }
 
-  /* Bottom mode tabs (MANUAL FIT / AI SCAN) — sticky to the bottom of
-     the modal body. Border-top separator, equal-width buttons, active
-     state uses the accent color. Sits above the existing .ps-bp-nav
-     CALCULATE BEST FIT button. */
+  /* 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 {
+    display: flex; flex-direction: column;
+    margin: 0 -16px;
+    border-top: 1px solid var(--ps-border-subtle);
+    background: var(--ps-bg-primary);
+    flex-shrink: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .ps-bpm-next-btn {
+    margin: 14px 16px 12px;
+    padding: 14px 18px;
+    background: var(--ps-accent); color: #FFFFFF;
+    border: none; border-radius: 10px;
+    font-family: inherit; font-size: 14px; font-weight: 700;
+    cursor: pointer; transition: opacity 0.15s, transform 0.15s;
+    letter-spacing: 0.02em;
+  }
+  .ps-bpm-next-btn:active { transform: scale(0.98); }
+  .ps-bpm-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }
   .ps-bpm-bottom-tabs {
     display: flex; align-items: stretch;
-    margin: 14px -16px 0;
     border-top: 1px solid var(--ps-border-subtle);
     background: var(--ps-bg-primary);
-    position: sticky; bottom: 0;
   }
   .ps-bpm-bottom-tab {
     flex: 1; background: none; border: none;
-    padding: 16px 8px 14px;
-    font-family: inherit; font-size: 11px; font-weight: 700;
+    padding: 14px 8px 12px;
+    font-family: inherit; font-size: 10px; font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--ps-text-muted); cursor: pointer;
     border-bottom: 2px solid transparent;
@@ -3083,7 +3116,7 @@ const STYLES = `
     color: var(--ps-accent);
     border-bottom-color: var(--ps-accent);
   }
-  .ps-bpm-bottom-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
+  .ps-bpm-bottom-tab svg { width: 13px; height: 13px; flex-shrink: 0; }
 
   .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }
 
@@ -3358,10 +3391,21 @@ const STYLES = `
   @media (max-width: 768px) {
     .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }
     /* Desktop layout's product image — hidden on mobile because BasicsStepMobile
-       renders its own .ps-bpm-image. The other steps (chest/midsection/hips) don't
+       has its own minimal layout. The other steps (chest/midsection/hips) don't
        need the giant left-column image on a phone either. */
     .ps-bp-image { display: none !important; }
-    .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; }
+    .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+    .ps-bp-layout { flex: 1; min-height: 0; }
+    /* Override desktop justify-content:center so BasicsStepMobile can
+       stretch to the bottom of the modal — its bottom action bar (Next +
+       tabs) needs to land at the bottom edge, not floating in the middle. */
+    .ps-bp-root {
+      justify-content: stretch !important;
+      height: auto !important;
+      max-height: none !important;
+      overflow: visible !important;
+      flex: 1 !important;
+    }
     .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }
     .ps-bp-upload-text { font-size: 14px; }
     .ps-bp-upload-hint { font-size: 11px; }
@@ -3458,7 +3502,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" }),
@@ -3476,7 +3520,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 }) {
@@ -3806,7 +3850,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: [
@@ -3918,7 +3962,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 }),
@@ -5358,25 +5402,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({
@@ -5397,9 +5478,43 @@ function BasicsStepMobile({
   switchToImperial,
   onUploadPhoto,
   onSwitchToScan,
+  onNext,
+  canProceed,
   error,
   t
 }) {
+  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 wMinFix = wUnit === "kg" ? 30 : 66;
+  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 - 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") }),
@@ -5427,134 +5542,130 @@ function BasicsStepMobile({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-fields", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row", 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(
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("HEIGHT") }),
+          /* @__PURE__ */ jsx("span", { className: "ps-bpm-value-display", children: hUnit === "in" ? `${ftDisplay}ft ${inDisplay}in` : `${Math.round(heightCm)} cm` })
+        ] }),
+        /* @__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: "number",
-              inputMode: "numeric",
-              className: "ps-bpm-input",
-              value: heightInches,
-              onChange: (e) => setHeightInches(e.target.value),
-              min: 0,
-              max: 11,
-              placeholder: "8"
+              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("span", { className: "ps-bpm-unit", children: "in" })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
-          /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsx(
             "input",
             {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-bpm-input",
-              value: height,
+              type: "range",
+              className: "ps-bpm-slider",
+              min: hCmMin,
+              max: hCmMax,
+              step: 1,
+              value: heightCm,
               onChange: (e) => setHeight(e.target.value),
-              min: 100,
-              max: 250,
-              placeholder: "173"
+              style: { ["--ps-pct"]: `${pctHCm}%` }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: "cm" })
+          /* @__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__ */ jsx("span", { className: "ps-bpm-label", children: t("WEIGHT") }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("WEIGHT") }),
+          /* @__PURE__ */ jsxs("span", { className: "ps-bpm-value-display", children: [
+            Math.round(weightNum),
+            " ",
+            wUnit.toUpperCase()
+          ] })
+        ] }),
+        /* @__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: "number",
-              inputMode: "numeric",
-              className: "ps-bpm-input",
-              value: weight,
+              type: "range",
+              className: "ps-bpm-slider",
+              min: wMinFix,
+              max: wMax,
+              step: 1,
+              value: weightNum,
               onChange: (e) => setWeight(e.target.value),
-              min: wUnit === "kg" ? 30 : 66,
-              max: wUnit === "kg" ? 300 : 660,
-              placeholder: wUnit === "kg" ? "70" : "154"
+              style: { ["--ps-pct"]: `${pctW}%` }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: wUnit })
+          /* @__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__ */ jsx("span", { className: "ps-bpm-label", children: t("AGE") }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-value-group", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row-top", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t("AGE") }),
+          /* @__PURE__ */ jsxs("span", { className: "ps-bpm-value-display", children: [
+            Math.round(ageNum),
+            " ",
+            t("YEARS")
+          ] })
+        ] }),
+        /* @__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: "number",
-              inputMode: "numeric",
-              className: "ps-bpm-input",
-              value: age,
+              type: "range",
+              className: "ps-bpm-slider",
+              min: ageMin,
+              max: ageMax,
+              step: 1,
+              value: ageNum,
               onChange: (e) => setAge(e.target.value),
-              min: 13,
-              max: 100,
-              placeholder: "30"
+              style: { ["--ps-pct"]: `${pctA}%` }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: t("years") })
+          /* @__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__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-      /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: "ps-bpm-bottom-tab ps-active",
-          onClick: () => {
-          },
-          children: [
-            /* @__PURE__ */ jsx(RulerIconSmall, {}),
-            t("MANUAL FIT")
-          ]
+          className: "ps-bpm-next-btn",
+          onClick: onNext,
+          disabled: !canProceed,
+          children: t("Next")
         }
       ),
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(
+        MobileBottomTabs,
         {
-          type: "button",
-          className: "ps-bpm-bottom-tab",
-          onClick: onSwitchToScan,
-          children: [
-            /* @__PURE__ */ jsx(ScanIconSmall, {}),
-            t("AI SCAN")
-          ]
+          mode: "manual",
+          onSwitchToManual: () => {
+          },
+          onSwitchToScan,
+          t
         }
       )
     ] })
@@ -6002,7 +6113,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: "←" }),
           " ",
@@ -6085,6 +6220,8 @@ function BodyProfileView({
               switchToImperial,
               onUploadPhoto: () => setStep("photo"),
               onSwitchToScan: () => setStep("photo"),
+              onNext: handleNext,
+              canProceed: true,
               error,
               t
             },
@@ -6262,7 +6399,7 @@ function BodyProfileView({
         })(),
         error && /* @__PURE__ */ jsx("p", { className: "ps-bp-error", children: error })
       ] }, "step-bra"),
-      /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
+      !(isMobile && step === "basics") && /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
         step !== "basics" ? /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
           " ",