@primestyleai/tryon 5.5.8 → 5.5.10

package/dist/react/index.js

@@ -2939,42 +2939,31 @@ const STYLES = `
      ════════════════════════════════════════════════════════════════ */
   .ps-bpm-root {
     display: flex; flex-direction: column;
-    gap: 14px; padding: 4px 4px 0;
-  }
-  .ps-bpm-image {
-    width: 100%;
-    height: 180px;
-    border-radius: 12px; overflow: hidden;
-    background: var(--ps-bg-secondary);
-    flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .ps-bpm-image-img {
-    max-width: 100%; max-height: 100%;
-    width: auto; height: 100%;
-    object-fit: contain; display: block;
+    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: 22px; font-weight: 700; color: var(--ps-text-primary);
-    margin: 0 0 6px; line-height: 1.25;
+    font-size: 18px; font-weight: 700; color: var(--ps-text-primary);
+    margin: 0 0 4px; line-height: 1.3;
   }
   .ps-bpm-subtitle {
-    font-size: 13px; color: var(--ps-text-muted);
-    margin: 0 auto; max-width: 280px; line-height: 1.45; font-weight: 400;
+    font-size: 12px; color: var(--ps-text-muted);
+    margin: 0 auto; max-width: 260px; line-height: 1.45; font-weight: 400;
   }
 
   /* Metric / Imperial pill toggle */
   .ps-bpm-toggle {
-    display: flex; justify-content: center; gap: 28px;
-    margin: 4px 0 8px;
+    display: flex; justify-content: center; gap: 24px;
+    margin: 2px 0 4px;
   }
   .ps-bpm-toggle-btn {
-    background: none; border: none; padding: 8px 4px;
-    font-family: inherit; font-size: 13px; font-weight: 600;
-    letter-spacing: 0.05em;
+    background: none; border: none; padding: 6px 4px;
+    font-family: inherit; font-size: 12px; font-weight: 600;
+    letter-spacing: 0.06em;
     color: var(--ps-text-muted); cursor: pointer;
-    border-bottom: 2px solid transparent;
+    border-bottom: 1.5px solid transparent;
     transition: all 0.2s;
   }
   .ps-bpm-toggle-btn.ps-active {
@@ -2982,38 +2971,66 @@ const STYLES = `
     border-bottom-color: var(--ps-accent);
   }
 
-  /* Field rows */
+  /* Field rows — minimal, compact, with thin slider underneath */
   .ps-bpm-fields {
     display: flex; flex-direction: column;
-    margin-top: 8px;
+    margin-top: 4px;
   }
   .ps-bpm-row {
-    display: flex; align-items: baseline;
-    padding: 22px 4px;
-    gap: 18px;
+    display: flex; flex-direction: column;
+    padding: 12px 4px 14px;
+    gap: 8px;
     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;
+  }
   .ps-bpm-label {
-    flex: 0 0 76px;
-    font-size: 12px; font-weight: 700;
+    flex: 0 0 64px;
+    font-size: 10px; font-weight: 700;
     letter-spacing: 0.1em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
   .ps-bpm-value-group {
-    flex: 1; display: flex; align-items: baseline; gap: 6px;
+    flex: 1; display: flex; align-items: baseline; gap: 4px;
     justify-content: flex-start;
   }
+
+  /* Minimal slider — 2px track, 12px accent thumb, no shadows */
+  .ps-bpm-slider {
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 2px; outline: none;
+    background: linear-gradient(
+      to right,
+      var(--ps-accent) 0%,
+      var(--ps-accent) 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 */
+  }
+  .ps-bpm-slider::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 12px; height: 12px; border-radius: 50%;
+    background: var(--ps-accent); border: none;
+    cursor: grab; transition: transform 0.15s ease;
+  }
+  .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
+  .ps-bpm-slider::-moz-range-thumb {
+    width: 12px; height: 12px; border-radius: 50%;
+    background: var(--ps-accent); border: none; cursor: grab;
+  }
+  .ps-bpm-slider::-moz-range-track { background: transparent; height: 2px; }
   .ps-bpm-input {
     background: transparent; border: none; outline: none;
     font-family: inherit;
-    font-size: 32px; font-weight: 600;
+    font-size: 20px; font-weight: 600;
     color: var(--ps-text-primary);
     padding: 0; margin: 0;
     width: auto; min-width: 0;
-    /* Width grows with content via field-sizing where supported */
     field-sizing: content;
-    /* Fallback width for browsers without field-sizing */
     max-width: 4ch;
   }
   .ps-bpm-input::-webkit-outer-spin-button,
@@ -3022,71 +3039,87 @@ const STYLES = `
   .ps-bpm-input::placeholder { color: var(--ps-border-color); }
   .ps-bpm-input:focus { outline: none; }
   .ps-bpm-unit {
-    font-size: 14px; font-weight: 500;
+    font-size: 11px; font-weight: 500;
     color: var(--ps-text-muted);
-    margin-left: 2px; flex-shrink: 0;
+    margin-left: 1px; flex-shrink: 0;
   }
 
-  /* RECOMMENDED upload card */
+  /* RECOMMENDED upload card — compact */
   .ps-bpm-photo-card {
-    display: flex; align-items: center; gap: 14px;
+    display: flex; align-items: center; gap: 12px;
     background: #1C1D1E; color: #FFFFFF;
-    border: none; border-radius: 12px;
-    padding: 14px 18px; margin-top: 6px;
+    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, box-shadow 0.15s ease;
-    position: relative;
+    transition: transform 0.15s ease;
   }
   .ps-bpm-photo-card:active { transform: scale(0.98); }
   .ps-bpm-photo-card-icon {
     flex-shrink: 0;
-    width: 40px; height: 40px; border-radius: 8px;
+    width: 32px; height: 32px; border-radius: 7px;
     background: rgba(255,255,255,0.08);
     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: 3px; min-width: 0;
+    flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
   }
   .ps-bpm-photo-card-badge {
     font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
     color: rgba(255,255,255,0.55);
   }
   .ps-bpm-photo-card-text {
-    font-size: 14px; font-weight: 500; color: #FFFFFF;
+    font-size: 13px; font-weight: 500; color: #FFFFFF;
   }
   .ps-bpm-photo-card-arrow {
     flex-shrink: 0; color: rgba(255,255,255,0.6);
     display: flex; align-items: center;
   }
+  .ps-bpm-photo-card-arrow svg { width: 16px; height: 16px; }
 
   /* Helper hint */
   .ps-bpm-hint {
-    font-size: 11px; color: var(--ps-text-muted);
-    text-align: center; margin: 4px 8px 0; line-height: 1.5;
+    font-size: 10px; color: var(--ps-text-muted);
+    text-align: center; margin: 2px 8px 0; line-height: 1.5;
     font-style: italic;
   }
   .ps-bpm-error {
-    font-size: 12px; color: var(--ps-error-color);
+    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;
@@ -3097,7 +3130,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); }
 
@@ -3372,10 +3405,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; }
@@ -5394,8 +5438,6 @@ function ScanIconSmall() {
   ] });
 }
 function BasicsStepMobile({
-  productImage,
-  productTitle,
   hUnit,
   wUnit,
   isImperialMode,
@@ -5413,11 +5455,22 @@ function BasicsStepMobile({
   switchToImperial,
   onUploadPhoto,
   onSwitchToScan,
+  onNext,
+  canProceed,
   error,
   t
 }) {
+  const heightCm = parseFloat(height) || 173;
+  const heightInTotal = (parseFloat(heightFeet) || 5) * 12 + (parseFloat(heightInches) || 8);
+  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 pctW = (weightNum - wMinFix) / (wMax - wMinFix) * 100;
+  const pctA = (ageNum - 13) / (100 - 13) * 100;
   return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-root", children: [
-    productImage && /* @__PURE__ */ jsx("div", { className: "ps-bpm-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-bpm-image-img" }) }),
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-header", children: [
       /* @__PURE__ */ jsx("h2", { className: "ps-bpm-title", children: t("Let's find your best fit") }),
       /* @__PURE__ */ jsx("p", { className: "ps-bpm-subtitle", children: t("Enter your details for a bespoke size recommendation") })
@@ -5444,90 +5497,151 @@ 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(
-            "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__ */ 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" })
+          ] })
+        ] }),
+        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-row", 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("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__ */ 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-row", 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("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__ */ 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(
@@ -5548,32 +5662,45 @@ function BasicsStepMobile({
     ),
     /* @__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",
-        {
-          type: "button",
-          className: "ps-bpm-bottom-tab",
-          onClick: onSwitchToScan,
-          children: [
-            /* @__PURE__ */ jsx(ScanIconSmall, {}),
-            t("AI SCAN")
-          ]
-        }
-      )
+      /* @__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")
+            ]
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -6085,8 +6212,6 @@ function BodyProfileView({
           return /* @__PURE__ */ jsx(
             BasicsStepMobile,
             {
-              productImage,
-              productTitle,
               hUnit,
               wUnit,
               isImperialMode,
@@ -6104,6 +6229,8 @@ function BodyProfileView({
               switchToImperial,
               onUploadPhoto: () => setStep("photo"),
               onSwitchToScan: () => setStep("photo"),
+              onNext: handleNext,
+              canProceed: true,
               error,
               t
             },
@@ -6281,7 +6408,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: "←" }),
           " ",