@primestyleai/tryon 5.6.7 → 5.6.9

package/dist/react/components/ProfileDetailModal.d.ts

@@ -1,5 +1,13 @@
 import type { TranslateFn } from "../../i18n";
 import type { Profile } from "../types";
+/**
+ * Edit profile dialog — opens as a dark overlay ABOVE the main modal
+ * (z-index matches the .ps-tryon-overlay max-int so it always stacks
+ * on top). Wraps ProfileEditView so the user gets a real editable form
+ * with name + gender + units + height/weight/age + Save / Cancel.
+ *
+ * Portaled to document.body so parent stacking contexts can't clip it.
+ */
 export declare function ProfileDetailModal({ profileDetail, setProfileDetail, setProfiles, activeProfileId, setActiveProfileId, t, }: {
     profileDetail: Profile | null;
     setProfileDetail: (p: Profile | null) => void;
@@ -7,4 +15,4 @@ export declare function ProfileDetailModal({ profileDetail, setProfileDetail, se
     activeProfileId: string | null;
     setActiveProfileId: (id: string | null) => void;
     t: TranslateFn;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").ReactPortal | null;

package/dist/react/index.js

@@ -2805,15 +2805,28 @@ const STYLES = `
   }
   .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }
 
-  /* Profile detail modal */
+  /* Profile detail modal — portaled to body, sits ABOVE the main modal
+     overlay (which has z-index 2147483647). Equal z-index + later DOM
+     order means this stacks on top. Same trick as the language dropdown. */
   .ps-tryon-detail-overlay {
     position: fixed; inset: 0; background: rgba(0,0,0,0.55);
     display: flex; align-items: center; justify-content: center;
-    z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
+    z-index: 2147483647; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
+    isolation: isolate;
+    --ps-accent: #3B82F6;
+    --ps-accent-hover: #2563EB;
+    --ps-text-primary: #1C1D1E;
+    --ps-text-secondary: #454545;
+    --ps-text-muted: #84898C;
+    --ps-border-color: #E7E7E7;
+    --ps-border-subtle: #F0F0F0;
+    --ps-bg-primary: #FFFFFF;
+    --ps-bg-secondary: #F8FAFF;
+    --ps-error-color: #E7000B;
   }
   .ps-tryon-detail-modal {
-    background: var(--ps-bg-primary); border-radius: 0.83vw; width: 100%; max-width: 23vw; max-height: 85vh;
-    overflow-y: auto; box-shadow: 0 1.67vw 3.33vw rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
+    background: var(--ps-bg-primary); border-radius: 14px; width: 100%; max-width: 480px; max-height: 85vh;
+    overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
     font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);
   }
   .ps-tryon-detail-header {
@@ -3719,6 +3732,155 @@ const STYLES = `
   .ps-msr-tryon-cta:disabled { opacity: 0.4; cursor: not-allowed; }
   .ps-msr-tryon-cta svg { flex-shrink: 0; }
 
+  /* ════════════════════════════════════════════════════════════════
+     BodyShapeStepMobile (.ps-bsm-*) — vertical stacked option cards
+     for body shape questions on mobile (chest / midsection / seat /
+     hips). Matches the THE DIGITAL TAILOR reference design themed
+     with the user's accent color.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-bsm-root {
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 4px 24px;
+    flex: 1; min-height: 0;
+  }
+  .ps-bsm-step {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    margin-bottom: -4px;
+  }
+  .ps-bsm-question {
+    font-size: 26px; font-weight: 800;
+    color: var(--ps-text-primary);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+    margin: 0 0 6px;
+  }
+  .ps-bsm-options {
+    display: flex; flex-direction: column; gap: 12px;
+  }
+  .ps-bsm-card {
+    display: flex; align-items: center; justify-content: space-between;
+    width: 100%;
+    padding: 16px 18px;
+    background: var(--ps-bg-secondary);
+    border: 2px solid transparent;
+    border-radius: 14px;
+    cursor: pointer; font-family: inherit;
+    text-align: left;
+    transition: background 0.18s, border-color 0.18s, transform 0.15s;
+  }
+  .ps-bsm-card:active { transform: scale(0.985); }
+  .ps-bsm-card.ps-active {
+    background: var(--ps-accent);
+    border-color: var(--ps-accent);
+    box-shadow: 0 8px 24px rgba(33, 84, 239, 0.22);
+  }
+  .ps-bsm-card-content {
+    display: flex; flex-direction: column; gap: 6px;
+    min-width: 0;
+  }
+  .ps-bsm-card-eyebrow {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-eyebrow {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .ps-bsm-card-label {
+    font-size: 22px; font-weight: 800;
+    color: var(--ps-text-primary);
+    letter-spacing: 0.02em;
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-label { color: #FFFFFF; }
+  .ps-bsm-card-thumb {
+    flex-shrink: 0;
+    width: 64px; height: 64px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.6);
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+    margin-left: 14px;
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-thumb {
+    background: rgba(255, 255, 255, 0.18);
+  }
+  .ps-bsm-card-thumb img {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain;
+  }
+
+  /* Mobile bra step fixes — give grid items breathing room and keep
+     the dropdown visible. The desktop layout uses .ps-bp-bra-* but
+     it's tight on phones. */
+  @media (max-width: 768px) {
+    .ps-bp-bra-step { padding: 4px 4px 24px; }
+    .ps-bp-bra-step .ps-bp-title {
+      font-size: 22px; font-weight: 800;
+      text-align: left; margin-bottom: 18px;
+      letter-spacing: -0.01em;
+    }
+    .ps-bp-bra-section { margin-bottom: 22px; }
+    .ps-bp-bra-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .ps-bp-bra-label {
+      font-size: 11px !important; font-weight: 700;
+      letter-spacing: 0.14em; text-transform: uppercase;
+      color: var(--ps-text-muted);
+    }
+    .ps-bp-bra-region-trigger {
+      padding: 6px 12px !important; font-size: 12px !important;
+      border: 1px solid var(--ps-border-color); border-radius: 999px;
+      background: var(--ps-bg-secondary);
+      color: var(--ps-text-secondary);
+    }
+    .ps-bp-bra-region-dropdown {
+      position: absolute; right: 0; top: 100%;
+      margin-top: 6px;
+      background: var(--ps-bg-primary);
+      border: 1px solid var(--ps-border-color);
+      border-radius: 10px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+      padding: 6px;
+      z-index: 5;
+      display: flex; flex-direction: column; gap: 2px;
+      min-width: 80px;
+    }
+    .ps-bp-bra-region-item {
+      padding: 8px 12px !important; font-size: 12px !important;
+      border-radius: 6px; background: none; border: none;
+      cursor: pointer; text-align: left;
+      color: var(--ps-text-secondary);
+    }
+    .ps-bp-bra-region-item.ps-selected {
+      background: var(--ps-accent); color: #FFFFFF;
+    }
+    .ps-bp-bra-grid {
+      display: grid !important;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+    }
+    .ps-bp-bra-btn {
+      padding: 12px 4px !important; font-size: 13px !important;
+      border-radius: 8px;
+      border: 1.5px solid var(--ps-border-color);
+      background: var(--ps-bg-primary);
+      color: var(--ps-text-primary);
+      font-weight: 600;
+      cursor: pointer;
+      min-height: 44px;
+    }
+    .ps-bp-bra-btn-selected {
+      background: var(--ps-accent) !important;
+      border-color: var(--ps-accent) !important;
+      color: #FFFFFF !important;
+    }
+  }
+
   /* ════════════════════════════════════════════════════════════════
      MobileSectionDetail (.ps-msd-*) — section detail view on mobile.
      Layout: scroll container with rich blueprint rows matching the
@@ -3851,6 +4013,8 @@ const STYLES = `
   }
   .ps-msp-card-photo {
     width: 100%; height: 100%; object-fit: cover; display: block;
+    /* Same head-bias crop as the profile detail avatar */
+    object-position: 50% 12%;
   }
   .ps-msp-avatar {
     position: relative;
@@ -4045,15 +4209,17 @@ const STYLES = `
      ════════════════════════════════════════════════════════════════ */
   .ps-cpw-root {
     display: flex; flex-direction: column;
-    gap: 20px; padding: 4px 4px 24px;
+    height: 100%; min-height: 0;
+    margin: 0 -16px;
   }
 
-  /* Step header — eyebrow + title + progress */
+  /* Step header — sticky at top */
   .ps-cpw-step-head {
     display: flex; align-items: flex-start; justify-content: space-between;
     gap: 16px;
-    padding-bottom: 18px;
+    padding: 4px 16px 18px;
     border-bottom: 1px solid var(--ps-border-subtle);
+    flex-shrink: 0;
   }
   .ps-cpw-eyebrow {
     font-size: 10px; font-weight: 700;
@@ -4091,6 +4257,9 @@ const STYLES = `
   .ps-cpw-body {
     display: flex; flex-direction: column;
     gap: 24px;
+    flex: 1; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
+    padding: 18px 16px 24px;
   }
 
   /* Step 1 — Identity form */
@@ -4177,7 +4346,8 @@ const STYLES = `
   }
   .ps-cpw-photo-upload {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 6px; padding: 22px;
+    gap: 8px; padding: 38px 18px;
+    min-height: 220px;
     background: var(--ps-bg-secondary);
     border: 2px dashed var(--ps-border-color);
     border-radius: 12px;
@@ -4282,13 +4452,14 @@ const STYLES = `
     color: var(--ps-accent);
   }
 
-  /* Footer actions */
+  /* Footer actions — sticky at the bottom */
   .ps-cpw-footer {
     display: flex; align-items: center; justify-content: space-between;
     gap: 12px;
-    padding-top: 18px;
+    padding: 16px 16px;
     border-top: 1px solid var(--ps-border-subtle);
-    margin-top: 4px;
+    background: var(--ps-bg-primary);
+    flex-shrink: 0;
   }
   .ps-cpw-back-btn {
     background: none; border: none;
@@ -4355,6 +4526,11 @@ const STYLES = `
   }
   .ps-pmv-hero-avatar img {
     width: 100%; height: 100%; object-fit: cover;
+    /* Bias the crop toward the top of the photo so the head/face shows
+       through the circular avatar instead of the torso. Works for any
+       full-body or head-and-torso photo where the head is in the upper
+       portion of the frame. */
+    object-position: 50% 12%;
   }
   .ps-pmv-hero-info { flex: 1; min-width: 0; }
   .ps-pmv-hero-eyebrow {
@@ -5588,60 +5764,59 @@ function ProfileDetailModal({
   setActiveProfileId: setActiveProfileId2,
   t
 }) {
+  useEffect(() => {
+    if (!profileDetail || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [profileDetail]);
   if (!profileDetail) return null;
-  const p = profileDetail;
-  const measurements = [
-    { label: t("Height"), value: p.heightCm, unit: t("cm") },
-    { label: t("Weight"), value: p.weightKg, unit: t("kg") },
-    { label: t("Chest"), value: p.chest, unit: t("cm") },
-    { label: t("Bust"), value: p.bust, unit: t("cm") },
-    { label: t("Waist"), value: p.waist, unit: t("cm") },
-    { label: t("Hips"), value: p.hips, unit: t("cm") },
-    { label: t("Shoulders"), value: p.shoulderWidth, unit: t("cm") },
-    { label: t("Sleeve"), value: p.sleeveLength, unit: t("cm") },
-    { label: t("Inseam"), value: p.inseam, unit: t("cm") },
-    { label: t("Neck"), value: p.neckCircumference, unit: t("cm") },
-    { label: t("Foot"), value: p.footLengthCm, unit: t("cm") },
-    { label: t("Shoe EU"), value: p.shoeEU ? Number(p.shoeEU) : void 0, unit: "" },
-    { label: t("Shoe US"), value: p.shoeUS ? Number(p.shoeUS) : void 0, unit: "" },
-    { label: t("Shoe UK"), value: p.shoeUK ? Number(p.shoeUK) : void 0, unit: "" }
-  ].filter((m) => m.value);
-  return /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-overlay", onClick: (e) => {
-    if (e.target === e.currentTarget) setProfileDetail(null);
-  }, children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-modal", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-header", children: [
-      /* @__PURE__ */ jsx("span", { children: p.name }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setProfileDetail(null), children: /* @__PURE__ */ jsx(XIcon, { size: 18 }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-gender", children: [
-        /* @__PURE__ */ jsx(UserIcon, { size: 18 }),
-        " ",
-        p.gender === "female" ? t("Women's Profile") : t("Men's Profile")
-      ] }),
-      measurements.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-grid", children: measurements.map((m) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-cell-label", children: m.label }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell-value", children: [
-          Math.round(m.value),
-          m.unit ? ` ${m.unit}` : ""
+  if (typeof document === "undefined") return null;
+  const handleSave = (updated) => {
+    setProfiles((prev) => prev.map(
+      (p) => p.id === profileDetail.id ? {
+        ...p,
+        ...updated,
+        // Keep id + createdAt + sizeHistory + measurements; bump lastEditedAt
+        id: p.id,
+        createdAt: p.createdAt,
+        sizeHistory: p.sizeHistory,
+        measurements: p.measurements,
+        lastEditedAt: Date.now()
+      } : p
+    ));
+    setProfileDetail(null);
+  };
+  const handleClose = () => setProfileDetail(null);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ps-tryon-detail-overlay",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) handleClose();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-modal", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-header", children: [
+            /* @__PURE__ */ jsx("span", { children: t("Edit Profile") }),
+            /* @__PURE__ */ jsx("button", { onClick: handleClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx(XIcon, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-body", children: /* @__PURE__ */ jsx(
+            ProfileEditView,
+            {
+              profile: profileDetail,
+              onSave: handleSave,
+              onCancel: handleClose,
+              t
+            }
+          ) })
         ] })
-      ] }, m.label)) }),
-      p.createdAt && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-date", children: [
-        t("Saved"),
-        " ",
-        new Date(p.createdAt).toLocaleDateString()
-      ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-detail-delete", onClick: () => {
-        setProfiles((prev) => prev.filter((x) => x.id !== p.id));
-        if (activeProfileId === p.id) setActiveProfileId2(null);
-        setProfileDetail(null);
-      }, children: [
-        /* @__PURE__ */ jsx(TrashIcon, {}),
-        " ",
-        t("Delete Profile")
-      ] })
-    ] })
-  ] }) });
+      }
+    ),
+    document.body
+  );
 }
 function WelcomeView({
   productImage,
@@ -7690,6 +7865,10 @@ function ShapeSection({
 }
 function CreateProfileWizard({ onSave, onCancel, t }) {
   const [step, setStep] = useState(1);
+  const bodyScrollRef = useRef(null);
+  useEffect(() => {
+    if (bodyScrollRef.current) bodyScrollRef.current.scrollTop = 0;
+  }, [step]);
   const [name, setName] = useState("");
   const [gender, setGender] = useState("male");
   const [unit, setUnit] = useState("cm");
@@ -7807,7 +7986,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-cpw-body", children: step === 1 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity", children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-cpw-body", ref: bodyScrollRef, children: step === 1 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
         /* @__PURE__ */ jsx("label", { className: "ps-cpw-field-label", children: t("PROFILE NAME") }),
         /* @__PURE__ */ jsx(
@@ -8691,6 +8870,50 @@ function PhotoStepMobile({
     ] })
   ] });
 }
+function BodyShapeStepMobile({
+  stepNumber,
+  totalSteps,
+  title,
+  options,
+  selected,
+  onSelect,
+  t
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-bsm-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-bsm-step", children: [
+      t("STEP"),
+      " ",
+      String(stepNumber).padStart(2, "0"),
+      " / ",
+      String(totalSteps).padStart(2, "0")
+    ] }),
+    /* @__PURE__ */ jsx("h2", { className: "ps-bsm-question", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bsm-options", children: options.map((opt, idx) => {
+      const isActive = selected === opt.value;
+      const profileLetter = String.fromCharCode(65 + idx);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `ps-bsm-card${isActive ? " ps-active" : ""}`,
+          onClick: () => onSelect(opt.value),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-bsm-card-content", children: [
+              /* @__PURE__ */ jsxs("span", { className: "ps-bsm-card-eyebrow", children: [
+                t("PROFILE"),
+                " ",
+                profileLetter
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ps-bsm-card-label", children: opt.label.toUpperCase() })
+            ] }),
+            opt.img && /* @__PURE__ */ jsx("div", { className: "ps-bsm-card-thumb", children: /* @__PURE__ */ jsx("img", { src: opt.img, alt: opt.label }) })
+          ]
+        },
+        opt.value
+      );
+    }) })
+  ] });
+}
 function CameraUploadIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "24", height: "24", 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" }),
@@ -9250,7 +9473,23 @@ function BodyProfileView({
           error && /* @__PURE__ */ jsx("p", { className: "ps-bp-error", children: error })
         ] }, "step-basics");
       })(),
-      step === "chest" && !isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      step === "chest" && !isWomen && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("chest") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR CHEST?"),
+          options: [
+            { value: "narrow", label: t("Narrow"), img: BODY_IMAGES.male.chest.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.chest.average },
+            { value: "broad", label: t("Broad"), img: BODY_IMAGES.male.chest.broad }
+          ],
+          selected: chestProfile,
+          onSelect: (v) => setChestProfile(v),
+          t
+        },
+        "step-chest-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your chest?") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.chest.narrow, label: t("Narrow"), selected: chestProfile === "narrow", onSelect: () => setChestProfile("narrow"), onHover: () => setHoverDesc(t("A slimmer, narrower chest build")), onLeave: () => setHoverDesc("") }),
@@ -9258,8 +9497,28 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.chest.broad, label: t("Broad"), selected: chestProfile === "broad", onSelect: () => setChestProfile("broad"), onHover: () => setHoverDesc(t("A wider, more muscular chest")), onLeave: () => setHoverDesc("") })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-chest"),
-      step === "midsection" && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-chest")),
+      step === "midsection" && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("midsection") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR MIDSECTION?"),
+          options: isWomen ? [
+            { value: "flat", label: t("Flat"), img: BODY_IMAGES.female.stomach.flat },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.stomach.average },
+            { value: "round", label: t("Full"), img: BODY_IMAGES.female.stomach.round }
+          ] : [
+            { value: "flat", label: t("Flat"), img: BODY_IMAGES.male.stomach.flat },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.stomach.average },
+            { value: "round", label: t("Full"), img: BODY_IMAGES.male.stomach.round }
+          ],
+          selected: midsectionProfile,
+          onSelect: (v) => setMidsectionProfile(v),
+          t
+        },
+        "step-midsection-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your midsection?") }),
         /* @__PURE__ */ jsx("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: isWomen ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.stomach.flat, label: t("Flat"), selected: midsectionProfile === "flat", onSelect: () => setMidsectionProfile("flat"), onHover: () => setHoverDesc(t("A flatter midsection with minimal protrusion")), onLeave: () => setHoverDesc("") }),
@@ -9271,8 +9530,28 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.stomach.round, label: t("Full"), selected: midsectionProfile === "round", onSelect: () => setMidsectionProfile("round"), onHover: () => setHoverDesc(t("A fuller, more rounded midsection")), onLeave: () => setHoverDesc("") })
         ] }) }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-midsection"),
-      step === "seat" && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-midsection")),
+      step === "seat" && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("seat") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR SEAT?"),
+          options: isWomen ? [
+            { value: "narrow", label: t("Flat"), img: BODY_IMAGES.female.seat.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.seat.average },
+            { value: "full", label: t("Full"), img: BODY_IMAGES.female.seat.full }
+          ] : [
+            { value: "narrow", label: t("Flat"), img: BODY_IMAGES.male.seat.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.seat.average },
+            { value: "full", label: t("Full"), img: BODY_IMAGES.male.seat.full }
+          ],
+          selected: seatProfile,
+          onSelect: (v) => setSeatProfile(v),
+          t
+        },
+        "step-seat-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your seat?") }),
         /* @__PURE__ */ jsx("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: isWomen ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.seat.narrow, label: t("Flat"), selected: seatProfile === "narrow", onSelect: () => setSeatProfile("narrow"), onHover: () => setHoverDesc(t("A flatter backside with less projection")), onLeave: () => setHoverDesc("") }),
@@ -9284,8 +9563,24 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.seat.full, label: t("Full"), selected: seatProfile === "full", onSelect: () => setSeatProfile("full"), onHover: () => setHoverDesc(t("A fuller, more rounded backside")), onLeave: () => setHoverDesc("") })
         ] }) }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-seat"),
-      step === "hips" && isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-seat")),
+      step === "hips" && isWomen && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("hips") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR HIPS?"),
+          options: [
+            { value: "narrow", label: t("Narrow"), img: BODY_IMAGES.female.hips.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.hips.average },
+            { value: "full", label: t("Curvy"), img: BODY_IMAGES.female.hips.full }
+          ],
+          selected: hipProfile,
+          onSelect: (v) => setHipProfile(v),
+          t
+        },
+        "step-hips-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your hips?") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.hips.narrow, label: t("Narrow"), selected: hipProfile === "narrow", onSelect: () => setHipProfile("narrow"), onHover: () => setHoverDesc(t("Hips closer to shoulder width")), onLeave: () => setHoverDesc("") }),
@@ -9293,7 +9588,7 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.hips.full, label: t("Curvy"), selected: hipProfile === "full", onSelect: () => setHipProfile("full"), onHover: () => setHoverDesc(t("Hips wider than shoulders")), onLeave: () => setHoverDesc("") })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-hips"),
+      ] }, "step-hips")),
       step === "bra" && isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-bra-step", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Select your bra size") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-bra-section", children: [