@primestyleai/tryon 5.5.3 → 5.5.5

package/dist/react/index.js

@@ -291,29 +291,36 @@ const STYLES = `
   }
 
   .ps-tryon-btn {
-    display: inline-flex; align-items: center; gap: 0.42vw;
-    padding: var(--ps-btn-padding, 0.63vw 1.25vw);
+    display: inline-flex; align-items: center; gap: clamp(6px, 0.42vw, 8px);
+    padding: var(--ps-btn-padding, clamp(10px, 0.63vw, 14px) clamp(16px, 1.25vw, 24px));
     background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);
     font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
-    font-size: var(--ps-btn-font-size, 0.73vw); font-weight: var(--ps-btn-font-weight, 600);
-    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 0.42vw);
+    font-size: var(--ps-btn-font-size, clamp(13px, 0.73vw, 15px)); font-weight: var(--ps-btn-font-weight, 600);
+    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, clamp(6px, 0.42vw, 8px));
     cursor: pointer; transition: all 0.2s ease;
     width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);
     box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;
+    box-sizing: border-box;
   }
-  .ps-tryon-btn svg { width: var(--ps-btn-icon-size, 0.94vw); height: var(--ps-btn-icon-size, 0.94vw); flex-shrink: 0; }
+  .ps-tryon-btn svg { width: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); height: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); flex-shrink: 0; }
   .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, var(--ps-accent-hover)); transform: translateY(-1px); }
   .ps-tryon-btn:active { transform: translateY(0); }
 
   .ps-tryon-overlay {
     position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
     display: flex; align-items: center; justify-content: center;
-    z-index: 999999;
+    z-index: 2147483647;
+    isolation: isolate;
+    contain: layout style;
     padding: 0.83vw;
     padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));
     animation: ps-fade-in 0.2s ease;
     overflow-y: auto; -webkit-overflow-scrolling: touch;
+    font-family: system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
   }
+  .ps-tryon-overlay, .ps-tryon-overlay *, .ps-tryon-overlay *::before, .ps-tryon-overlay *::after { box-sizing: border-box; }
   @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }
 
   .ps-tryon-modal {
@@ -369,21 +376,22 @@ const STYLES = `
   /* Language switcher */
   .ps-tryon-lang-wrap { position: relative; z-index: 99999; }
   .ps-tryon-lang-trigger {
-    display: flex; align-items: center; gap: 0.36vw;
-    padding: 0.36vw 0.73vw;
-    border: 1.5px solid var(--ps-border-color); border-radius: 0.57vw;
+    display: flex; align-items: center; gap: clamp(5px, 0.36vw, 6px);
+    padding: clamp(6px, 0.36vw, 8px) clamp(10px, 0.73vw, 12px);
+    border: 1.5px solid var(--ps-border-color); border-radius: clamp(8px, 0.57vw, 10px);
     background: transparent; cursor: pointer; color: var(--ps-text-secondary);
     transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
+    min-height: 36px;
   }
   .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {
     border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);
   }
-  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: 0.8vw; height: 0.8vw; }
+  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: clamp(13px, 0.8vw, 14px); height: clamp(13px, 0.8vw, 14px); }
   .ps-tryon-lang-current {
-    font-size: 0.68vw; font-weight: 500; letter-spacing: 0.01em;
+    font-size: clamp(12px, 0.68vw, 13px); font-weight: 500; letter-spacing: 0.01em;
   }
   .ps-tryon-lang-arrow {
-    font-size: 0.57vw; transition: transform 0.25s ease; display: inline-block;
+    font-size: clamp(10px, 0.57vw, 11px); transition: transform 0.25s ease; display: inline-block;
   }
   .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }
 
@@ -2614,24 +2622,83 @@ const STYLES = `
   .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: var(--ps-error-color); }
   .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }
 
-  /* Mobile responsive */
+  /* ════════════════════════════════════════════════════════════════
+     Mobile (≤768px) — full-screen drawer, bigger touch targets,
+     px-based sizing (vw becomes sub-pixel and unreadable on phones)
+     ════════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) {
+    /* ── Trigger button: minimum 44px touch target, readable text ── */
+    .ps-tryon-btn {
+      padding: 12px 20px; font-size: 14px; gap: 8px;
+      border-radius: 8px; min-height: 44px;
+    }
+    .ps-tryon-btn svg { width: 18px; height: 18px; }
+
+    /* ── Overlay: full screen, no centering, slide-up drawer feel ── */
     .ps-tryon-overlay {
-      padding: 0;
-      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-      align-items: stretch; justify-content: stretch;
+      padding: 0 !important;
+      align-items: stretch !important; justify-content: stretch !important;
+      overflow: hidden !important;
     }
-    .ps-tryon-modal {
-      max-width: 100%; max-height: none; width: 100%;
-      border-radius: 0; box-shadow: none;
-      min-height: 100%; flex: 1;
-      display: flex; flex-direction: column;
+
+    /* ── Modal: occupies entire viewport as a drawer ── */
+    .ps-tryon-modal,
+    .ps-tryon-modal-wide {
+      max-width: 100vw !important; max-width: 100dvw !important;
+      max-height: 100vh !important; max-height: 100dvh !important;
+      width: 100vw !important; width: 100dvw !important;
+      height: 100vh !important; height: 100dvh !important;
+      min-height: 100vh !important; min-height: 100dvh !important;
+      border-radius: 0 !important; box-shadow: none !important;
+      margin: 0 !important;
+      display: flex !important; flex-direction: column !important;
+      overflow: hidden !important;
+      animation: ps-mobile-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);
+      padding-top: env(safe-area-inset-top);
+      padding-bottom: env(safe-area-inset-bottom);
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+    }
+    .ps-tryon-modal > :last-child { flex: 1; min-height: 0; }
+
+    /* ── Header: bigger touch targets, fixed top ── */
+    .ps-tryon-header {
+      border-radius: 0 !important;
+      padding: 10px 14px !important;
+      flex-shrink: 0;
+      background: var(--ps-modal-header-bg, rgba(255,255,255,0.95)) !important;
+    }
+    .ps-tryon-header-icon {
+      width: 40px !important; height: 40px !important;
+      border-radius: 10px !important;
     }
-    .ps-tryon-modal-wide { max-width: 100%; width: 100%; height: auto; }
-    .ps-tryon-modal > :last-child { flex: 1; }
-    .ps-tryon-header { border-radius: 0; }
+    .ps-tryon-header-icon svg { width: 18px !important; height: 18px !important; }
+    .ps-tryon-close { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
+    .ps-tryon-close svg { width: 22px !important; height: 22px !important; }
+
+    /* ── Body: scrollable, comfortable padding, momentum scroll ── */
+    .ps-tryon-body {
+      padding: 16px !important;
+      flex: 1 !important; min-height: 0 !important;
+      overflow-y: auto !important; overflow-x: hidden !important;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* ── Back button: bigger, easier to tap ── */
+    .ps-tryon-back-btn {
+      font-size: 14px !important; gap: 6px !important;
+      margin-bottom: 12px !important; padding: 6px 0 !important;
+    }
+    .ps-tryon-back-btn svg { width: 18px !important; height: 12px !important; }
+
+    /* ── Preserve existing previews and modal-wide overrides ── */
     .ps-tryon-preview { height: 320px; }
   }
+
+  @keyframes ps-mobile-slide-up {
+    from { transform: translateY(100%); opacity: 0.4; }
+    to   { transform: translateY(0);    opacity: 1;   }
+  }
   @media (max-width: 720px) {
     .ps-tryon-result-split { flex-direction: column; }
     .ps-tryon-result-image-col { flex: none; }
@@ -2855,6 +2922,84 @@ const STYLES = `
   .ps-bp-photo-cta-done { color: var(--ps-success-color); }
   .ps-bp-photo-cta-done:hover { color: var(--ps-text-muted); }
 
+  /* ── Subtitle under the basics title ── */
+  .ps-bp-subtitle {
+    font-size: clamp(12px, 0.68vw, 13px); color: var(--ps-text-muted);
+    text-align: center; margin: 4px 0 0; font-weight: 400; line-height: 1.4;
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     Range slider rows for height / weight / age (basics step)
+     Big displayed value + thin track + circular thumb. Track fill
+     uses the inline --ps-pct CSS variable so we don't need JS to
+     repaint the gradient.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-bp-sliders {
+    display: flex; flex-direction: column; gap: clamp(18px, 1.4vw, 22px);
+    flex: 1; justify-content: center; padding: clamp(8px, 0.6vw, 12px) 0;
+  }
+  .ps-bp-slider-row {
+    display: grid;
+    grid-template-columns: clamp(70px, 6vw, 90px) 1fr;
+    grid-template-rows: auto auto;
+    column-gap: clamp(14px, 1vw, 20px); row-gap: 8px;
+    align-items: center;
+  }
+  .ps-bp-slider-label {
+    grid-column: 1; grid-row: 1 / span 2;
+    font-size: clamp(11px, 0.68vw, 12px); font-weight: 700;
+    color: var(--ps-text-muted); letter-spacing: 0.1em;
+    text-transform: uppercase;
+    align-self: center;
+  }
+  .ps-bp-slider-value-wrap {
+    grid-column: 2; grid-row: 1;
+    display: flex; align-items: baseline; gap: 6px;
+    color: var(--ps-text-primary);
+  }
+  .ps-bp-slider-value {
+    font-size: clamp(28px, 1.6vw, 32px); font-weight: 600;
+    line-height: 1; font-feature-settings: "tnum" 1;
+  }
+  .ps-bp-slider-value-sm { margin-left: 4px; }
+  .ps-bp-slider-unit {
+    font-size: clamp(13px, 0.78vw, 15px); color: var(--ps-text-muted);
+    font-weight: 500;
+  }
+
+  /* The slider itself — fully reset, custom track + thumb */
+  .ps-bp-slider {
+    grid-column: 2; grid-row: 2;
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 4px; 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: 999px; cursor: grab;
+    transition: background 0.05s linear;
+  }
+  .ps-bp-slider:active { cursor: grabbing; }
+  .ps-bp-slider::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 22px; height: 22px; border-radius: 50%;
+    background: #FFFFFF; border: 2px solid var(--ps-accent);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+    cursor: grab; transition: transform 0.15s ease;
+  }
+  .ps-bp-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
+  .ps-bp-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.04); }
+  .ps-bp-slider::-moz-range-thumb {
+    width: 22px; height: 22px; border-radius: 50%;
+    background: #FFFFFF; border: 2px solid var(--ps-accent);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+    cursor: grab;
+  }
+  .ps-bp-slider::-moz-range-track { background: transparent; height: 4px; }
+
   .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }
 
   /* Bra size step — vertically centered */
@@ -3127,7 +3272,29 @@ const STYLES = `
   /* ── Mobile responsive ── */
   @media (max-width: 768px) {
     .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }
-    .ps-bp-image { flex: none; height: 200px; border-radius: 10px; }
+    /* Hide the giant product/body photo on mobile — gives the form full vertical room */
+    .ps-bp-image { display: none !important; }
+    .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; }
+
+    /* ── Mobile slider rows: bigger labels, bigger values, taller sliders ── */
+    .ps-bp-sliders { gap: 22px; padding: 8px 0; }
+    .ps-bp-slider-row {
+      grid-template-columns: 80px 1fr;
+      column-gap: 16px; row-gap: 10px;
+    }
+    .ps-bp-slider-label { font-size: 12px !important; letter-spacing: 0.1em; }
+    .ps-bp-slider-value { font-size: 30px !important; font-weight: 600; }
+    .ps-bp-slider-unit { font-size: 14px !important; }
+    .ps-bp-slider {
+      height: 5px;
+    }
+    .ps-bp-slider::-webkit-slider-thumb { width: 26px; height: 26px; }
+    .ps-bp-slider::-moz-range-thumb { width: 26px; height: 26px; }
+
+    /* Subtitle below title */
+    .ps-bp-subtitle { font-size: 13px !important; margin-top: 6px !important; }
+
+    .ps-bp-image-fallback { flex: none; height: 200px; border-radius: 10px; }
     .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }
     .ps-bp-upload-text { font-size: 14px; }
     .ps-bp-upload-hint { font-size: 11px; }
@@ -5271,11 +5438,11 @@ function BodyProfileView({
   const [step, setStep] = useState("basics");
   step === "photo" ? 0 : steps.indexOf(step);
   const imperial = isImperial(sizingCountry);
-  const [height, setHeight] = useState(formRef.current.height || "");
-  const [heightFeet, setHeightFeet] = useState(formRef.current.heightFeet || "");
-  const [heightInches, setHeightInches] = useState(formRef.current.heightInches || "");
-  const [weight, setWeight] = useState(formRef.current.weight || "");
-  const [age, setAge] = useState(formRef.current.age || "");
+  const [height, setHeight] = useState(formRef.current.height || "173");
+  const [heightFeet, setHeightFeet] = useState(formRef.current.heightFeet || "5");
+  const [heightInches, setHeightInches] = useState(formRef.current.heightInches || "8");
+  const [weight, setWeight] = useState(formRef.current.weight || (imperial ? "154" : "70"));
+  const [age, setAge] = useState(formRef.current.age || "30");
   const [hUnit, setHUnit] = useState(
     heightUnit === "ft" ? "in" : heightUnit || (imperial ? "in" : "cm")
   );
@@ -5584,59 +5751,147 @@ function BodyProfileView({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "ps-bp-root", children: [
-      step === "basics" && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter", children: [
-        /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Let's find your best fit") }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-bp-system-toggle", children: [
-          /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${!isImperialMode ? " ps-bp-system-active" : ""}`, onClick: () => {
-            setHUnit("cm");
-            setWUnit("kg");
-            setHeightUnit("cm");
-            setWeightUnit("kg");
-            setSizingUnit?.("cm");
-          }, type: "button", children: t("Metric") }),
-          /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${isImperialMode ? " ps-bp-system-active" : ""}`, onClick: () => {
-            setHUnit("in");
-            setWUnit("lbs");
-            setHeightUnit("in");
-            setWeightUnit("lbs");
-            setSizingUnit?.("in");
-          }, type: "button", children: t("Imperial") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-fields", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("HEIGHT") }),
-            hUnit === "in" ? /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-input-group", children: [
-              /* @__PURE__ */ jsx("input", { type: "number", className: "ps-bp-inline-input", placeholder: "5", value: heightFeet, onChange: (e) => setHeightFeet(e.target.value), min: 3, max: 8 }),
-              /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-unit", children: "ft" }),
-              /* @__PURE__ */ jsx("input", { type: "number", className: "ps-bp-inline-input", placeholder: "10", value: heightInches, onChange: (e) => setHeightInches(e.target.value), min: 0, max: 11 }),
-              /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-unit", children: "in" })
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-input-group", children: [
-              /* @__PURE__ */ jsx("input", { type: "number", className: "ps-bp-inline-input", placeholder: "173", value: height, onChange: (e) => setHeight(e.target.value), min: 100, max: 250 }),
-              /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-unit", children: "cm" })
-            ] })
+      step === "basics" && (() => {
+        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 wMin = wUnit === "kg" ? 30 : 66;
+        const wMax = wUnit === "kg" ? 200 : 440;
+        const hCmPct = (heightCm - 120) / (220 - 120) * 100;
+        const hInPct = (heightInTotal - 48) / (84 - 48) * 100;
+        const wPct = (weightNum - wMin) / (wMax - wMin) * 100;
+        const aPct = (ageNum - 13) / (100 - 13) * 100;
+        const switchToMetric = () => {
+          if (hUnit === "in") {
+            const totalIn = (parseFloat(heightFeet) || 5) * 12 + (parseFloat(heightInches) || 8);
+            setHeight(String(Math.round(totalIn * 2.54)));
+          }
+          if (wUnit === "lbs" && weight) {
+            setWeight(String(Math.round(parseFloat(weight) / 2.205)));
+          }
+          setHUnit("cm");
+          setWUnit("kg");
+          setHeightUnit("cm");
+          setWeightUnit("kg");
+          setSizingUnit?.("cm");
+        };
+        const switchToImperial = () => {
+          if (hUnit === "cm") {
+            const cmVal = parseFloat(height) || 173;
+            const totalIn = Math.round(cmVal / 2.54);
+            setHeightFeet(String(Math.floor(totalIn / 12)));
+            setHeightInches(String(totalIn % 12));
+          }
+          if (wUnit === "kg" && weight) {
+            setWeight(String(Math.round(parseFloat(weight) * 2.205)));
+          }
+          setHUnit("in");
+          setWUnit("lbs");
+          setHeightUnit("in");
+          setWeightUnit("lbs");
+          setSizingUnit?.("in");
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter", children: [
+          /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Let's find your best fit") }),
+          /* @__PURE__ */ jsx("p", { className: "ps-bp-subtitle", children: t("Drag the sliders for a bespoke size recommendation") }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-bp-system-toggle", children: [
+            /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${!isImperialMode ? " ps-bp-system-active" : ""}`, onClick: switchToMetric, type: "button", children: t("Metric") }),
+            /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${isImperialMode ? " ps-bp-system-active" : ""}`, onClick: switchToImperial, type: "button", children: t("Imperial") })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("WEIGHT") }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-input-group", children: [
-              /* @__PURE__ */ jsx("input", { type: "number", className: "ps-bp-inline-input", placeholder: wUnit === "kg" ? "75" : "165", value: weight, onChange: (e) => setWeight(e.target.value), min: wUnit === "kg" ? 30 : 66, max: wUnit === "kg" ? 300 : 660 }),
-              /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-unit", children: wUnit })
+          /* @__PURE__ */ jsxs("div", { className: "ps-bp-sliders", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-bp-slider-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-label", children: t("HEIGHT") }),
+              /* @__PURE__ */ jsx("div", { className: "ps-bp-slider-value-wrap", children: hUnit === "in" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-value", children: ftDisplay }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-unit", children: "ft" }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-value ps-bp-slider-value-sm", children: inDisplay }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-unit", children: "in" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-value", children: Math.round(heightCm) }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-unit", children: "cm" })
+              ] }) }),
+              hUnit === "in" ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ps-bp-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"]: `${hInPct}%` }
+                }
+              ) : /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ps-bp-slider",
+                  min: 120,
+                  max: 220,
+                  step: 1,
+                  value: heightCm,
+                  onChange: (e) => setHeight(e.target.value),
+                  style: { ["--ps-pct"]: `${hCmPct}%` }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-bp-slider-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-label", children: t("WEIGHT") }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-bp-slider-value-wrap", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-value", children: Math.round(weightNum) }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-unit", children: wUnit })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ps-bp-slider",
+                  min: wMin,
+                  max: wMax,
+                  step: 1,
+                  value: weightNum,
+                  onChange: (e) => setWeight(e.target.value),
+                  style: { ["--ps-pct"]: `${wPct}%` }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-bp-slider-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-label", children: t("AGE") }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-bp-slider-value-wrap", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-value", children: Math.round(ageNum) }),
+                /* @__PURE__ */ jsx("span", { className: "ps-bp-slider-unit", children: t("years") })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  className: "ps-bp-slider",
+                  min: 13,
+                  max: 100,
+                  step: 1,
+                  value: ageNum,
+                  onChange: (e) => setAge(e.target.value),
+                  style: { ["--ps-pct"]: `${aPct}%` }
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("AGE") }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-input-group", children: [
-              /* @__PURE__ */ jsx("input", { type: "number", className: "ps-bp-inline-input", placeholder: "30", value: age, onChange: (e) => setAge(e.target.value), min: 13, max: 100 }),
-              /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-unit", children: t("years") })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: "ps-bp-photo-cta", onClick: () => setStep("photo"), type: "button", children: [
-          /* @__PURE__ */ jsx(CameraUploadIcon, {}),
-          /* @__PURE__ */ jsx("span", { children: t("Or upload a photo for AI sizing") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-bp-photo-cta-arrow", children: "→" })
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { className: "ps-bp-error", children: error })
-      ] }, "step-basics"),
+          /* @__PURE__ */ jsxs("button", { className: "ps-bp-photo-cta", onClick: () => setStep("photo"), type: "button", children: [
+            /* @__PURE__ */ jsx(CameraUploadIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: t("Or upload a photo for AI sizing") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-bp-photo-cta-arrow", children: "→" })
+          ] }),
+          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: [
         /* @__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: [
@@ -6898,39 +7153,42 @@ function PrimeStyleTryonInner({
       showIcon !== false && (buttonIcon || /* @__PURE__ */ jsx(CameraIcon, {})),
       /* @__PURE__ */ jsx("span", { children: resolvedButtonText })
     ] }),
-    view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
-        /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
-        /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
-      ] }),
-      view !== "body-profile" && view !== "processing" && !(view === "size-result" && sizeGuide?.sections && Object.keys(sizeGuide.sections).length > 1) && /* @__PURE__ */ jsx(Stepper, { view, stepIndex }),
-      /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: cx("ps-tryon-body", cn.body), style: { position: "relative", overflow: drawer ? "hidden" : void 0 }, children: [
-        showBackButton && /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back-btn", onClick: handleBack, children: [
-          /* @__PURE__ */ jsxs("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx("line", { x1: "17", y1: "6", x2: "1", y2: "6" }),
-            /* @__PURE__ */ jsx("polyline", { points: "5 1 1 6 5 11" })
-          ] }),
-          t("Back")
+    view !== "idle" && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
+          /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
+          /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
         ] }),
-        renderBody(),
-        /* @__PURE__ */ jsx(
-          DrawerPanel,
-          {
-            drawer,
-            setDrawer,
-            profiles,
-            setProfiles,
-            history,
-            setHistory,
-            setProfileDetail,
-            restoreHistory,
-            t
-          }
-        )
-      ] })
-    ] }) }),
+        view !== "body-profile" && view !== "processing" && !(view === "size-result" && sizeGuide?.sections && Object.keys(sizeGuide.sections).length > 1) && /* @__PURE__ */ jsx(Stepper, { view, stepIndex }),
+        /* @__PURE__ */ jsxs("div", { ref: bodyRef, className: cx("ps-tryon-body", cn.body), style: { position: "relative", overflow: drawer ? "hidden" : void 0 }, children: [
+          showBackButton && /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back-btn", onClick: handleBack, children: [
+            /* @__PURE__ */ jsxs("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "17", y1: "6", x2: "1", y2: "6" }),
+              /* @__PURE__ */ jsx("polyline", { points: "5 1 1 6 5 11" })
+            ] }),
+            t("Back")
+          ] }),
+          renderBody(),
+          /* @__PURE__ */ jsx(
+            DrawerPanel,
+            {
+              drawer,
+              setDrawer,
+              profiles,
+              setProfiles,
+              history,
+              setHistory,
+              setProfileDetail,
+              restoreHistory,
+              t
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    ),
     /* @__PURE__ */ jsx(
       ProfileDetailModal,
       {