@primestyleai/tryon 5.6.8 → 5.6.10

package/dist/react/index.js

@@ -3732,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
@@ -3854,19 +4003,44 @@ const STYLES = `
   .ps-msp-avatar-tag { background: var(--ps-accent); }
 
   .ps-msp-card-thumb {
+    position: relative;
     height: 90px;
     background: var(--ps-bg-secondary);
     border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: 22px;
     color: var(--ps-text-secondary);
-    overflow: hidden;
+    overflow: visible;
+  }
+  .ps-msp-card-thumb::after {
+    /* Clip the rectangle photo only, not the circle overlay */
+    content: ""; display: block;
   }
   .ps-msp-card-photo {
     width: 100%; height: 100%; object-fit: cover; display: block;
+    border-radius: 8px;
     /* Same head-bias crop as the profile detail avatar */
     object-position: 50% 12%;
   }
+  /* Circular profile avatar overlay — sits on the bottom-left of the
+     rectangular thumb, social-card style. Shows the head crop. */
+  .ps-msp-card-circle {
+    position: absolute;
+    left: 12px; bottom: -18px;
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    background: var(--ps-bg-primary);
+    border: 3px solid var(--ps-bg-primary);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    overflow: hidden;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--ps-accent);
+    z-index: 2;
+  }
+  .ps-msp-card-circle img {
+    width: 100%; height: 100%; object-fit: cover;
+    object-position: 50% 12%;
+  }
   .ps-msp-avatar {
     position: relative;
     display: flex; align-items: center; justify-content: center;
@@ -5906,17 +6080,25 @@ function MobileSkeleton({ landmarks, w, h }) {
 }
 function MobileScanningView({
   previewUrl,
+  productImage,
   bodyLandmarks,
   sizingDone,
   onSwitchToManual,
   t
 }) {
-  const stages = [
+  const displayImage = previewUrl || productImage || "";
+  const isPhotoMode = !!previewUrl;
+  const stages = isPhotoMode ? [
     { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo."), viewfinderText: t("DETECTING POSE") },
     { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t("SCANNING FRAME") },
     { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips."), viewfinderText: t("ANALYZING") },
     { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide."), viewfinderText: t("MATCHING SIZE") },
     { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
+  ] : [
+    { title: t("READING YOUR PROFILE"), desc: t("Loading your saved measurements and body shape answers."), viewfinderText: t("READING PROFILE") },
+    { title: t("ESTIMATING BODY"), desc: t("Computing chest, waist, hips, sleeve and inseam from your basics."), viewfinderText: t("ESTIMATING BODY") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the garment's size guide."), viewfinderText: t("MATCHING SIZE") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
   ];
   const [dims, setDims] = useState({ w: 800, h: 1200 });
   const handleImgLoad = (e) => {
@@ -5926,7 +6108,7 @@ function MobileScanningView({
   const [stageIdx, setStageIdx] = useState(0);
   useEffect(() => {
     if (sizingDone) return;
-    if (bodyLandmarks && stageIdx === 0) {
+    if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
       return;
     }
@@ -5934,7 +6116,7 @@ function MobileScanningView({
       setStageIdx((i) => Math.min(i + 1, stages.length - 1));
     }, 1600);
     return () => clearInterval(id);
-  }, [bodyLandmarks, sizingDone, stageIdx, stages.length]);
+  }, [bodyLandmarks, sizingDone, stageIdx, stages.length, isPhotoMode]);
   const current = stages[stageIdx] ?? stages[0];
   const [feedTick, setFeedTick] = useState(1);
   useEffect(() => {
@@ -5949,10 +6131,10 @@ function MobileScanningView({
         "LIVE_FEED:",
         String(feedTick).padStart(2, "0")
       ] }),
-      /* @__PURE__ */ jsx(
+      displayImage && /* @__PURE__ */ jsx(
         "img",
         {
-          src: previewUrl,
+          src: displayImage,
           alt: t("Your photo"),
           className: "ps-msc-photo",
           onLoad: handleImgLoad
@@ -5965,7 +6147,7 @@ function MobileScanningView({
         /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-br" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-msc-scanline" }),
-      bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
+      isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-bottom", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-text", children: [
           current.viewfinderText,
@@ -6987,7 +7169,17 @@ function SizeResultView({
     previewUrl: !!previewUrl
   });
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr", children: [
-    isSizingOnly && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
+    isMobile && isSizingOnly && /* @__PURE__ */ jsx(
+      MobileScanningView,
+      {
+        productImage,
+        bodyLandmarks: null,
+        sizingDone,
+        onSwitchToManual: () => setView("body-profile"),
+        t
+      }
+    ),
+    !isMobile && isSizingOnly && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-img-col", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-tryon-sr-product-img" }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.8vw" }, children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
@@ -8208,7 +8400,10 @@ function ProfileCard({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsx("div", { className: "ps-msp-card-header", children: /* @__PURE__ */ jsx("span", { className: "ps-msp-card-tag", children: isActive ? t("DEFAULT PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-thumb", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name, className: "ps-msp-card-photo" }) : /* @__PURE__ */ jsx(ProfileAvatar, { gender: profile.gender }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-thumb", children: [
+          profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name, className: "ps-msp-card-photo" }) : /* @__PURE__ */ jsx(ProfileAvatar, { gender: profile.gender }),
+          /* @__PURE__ */ jsx("div", { className: "ps-msp-card-circle", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: "" }) : /* @__PURE__ */ jsx(UserIcon, { size: 18 }) })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "ps-msp-card-name", children: profile.name }),
         /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-meta", children: [
           heightDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
@@ -8721,6 +8916,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" }),
@@ -9280,7 +9519,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("") }),
@@ -9288,8 +9543,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("") }),
@@ -9301,8 +9576,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("") }),
@@ -9314,8 +9609,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("") }),
@@ -9323,7 +9634,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: [