@primestyleai/tryon 5.8.31 → 5.8.33

package/dist/react/index.js

@@ -4974,44 +4974,179 @@ const STYLES = `
     color: var(--ps-text-muted);
   }
 
-  /* ── Image path — single combined screen, vw-scaled ── */
-  .ps-cpw-image-combined {
-    display: flex; flex-direction: column; align-items: stretch;
-    gap: clamp(8px, 0.7vw, 14px);
+  /* ── Image path — split layout with dropzone + photo guide ──
+     Two columns: dropzone with silhouette placeholder on the LEFT,
+     gender pills + name input + photo-guide checklist on the RIGHT.
+     Collapses to single column on narrow viewports via flex-wrap. */
+  .ps-cpw-image-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+    gap: clamp(14px, 1.2vw, 26px);
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
   }
-  .ps-cpw-photo-dropzone {
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: clamp(4px, 0.4vw, 10px);
+  .ps-cpw-image-left {
+    display: flex; flex-direction: column;
+    min-width: 0; min-height: 0;
+  }
+  .ps-cpw-image-right {
+    display: flex; flex-direction: column;
+    gap: clamp(10px, 0.9vw, 18px);
+    min-width: 0; min-height: 0;
+  }
+
+  /* Dropzone — premium card with a faded body silhouette behind the
+     upload prompt. Communicates "this is where the body photo goes". */
+  .ps-cpw-dropzone {
+    position: relative;
+    display: flex; align-items: center; justify-content: center;
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
-    padding: clamp(10px, 0.9vw, 18px);
-    border: 2px dashed var(--ps-border-color);
-    border-radius: clamp(8px, 0.6vw, 14px);
-    background: var(--ps-bg-secondary);
+    padding: clamp(14px, 1.2vw, 26px);
+    border: 1.5px dashed var(--ps-border-color);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    background:
+      radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.05) 0%, transparent 70%),
+      var(--ps-bg-secondary);
     color: var(--ps-text-muted);
     cursor: pointer; font-family: inherit;
-    transition: border-color 0.18s, background 0.18s;
+    overflow: hidden;
+    transition: border-color 0.22s, background 0.22s, transform 0.22s;
+  }
+  .ps-cpw-dropzone:hover {
+    border-color: var(--ps-accent);
+    transform: translateY(-1px);
+  }
+  .ps-cpw-dropzone:disabled { opacity: 0.6; cursor: default; transform: none; }
+  /* Faded body silhouette behind the upload prompt */
+  .ps-cpw-dropzone-silhouette {
+    position: absolute;
+    left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    width: clamp(60px, 7vw, 130px);
+    height: auto;
+    color: var(--ps-accent);
+    opacity: 0.08;
+    pointer-events: none;
+  }
+  .ps-cpw-dropzone-content {
+    position: relative;
+    z-index: 1;
+    display: flex; flex-direction: column; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
+  }
+  .ps-cpw-dropzone-upload-icon {
+    width: clamp(28px, 2vw, 40px);
+    height: clamp(28px, 2vw, 40px);
+    color: var(--ps-accent);
+    margin-bottom: clamp(2px, 0.2vw, 6px);
   }
-  .ps-cpw-photo-dropzone:hover { border-color: var(--ps-accent); background: rgba(33, 84, 239, 0.04); }
-  .ps-cpw-photo-dropzone:disabled { opacity: 0.6; cursor: default; }
-  .ps-cpw-photo-dropzone-title {
+  .ps-cpw-dropzone-title {
     font-size: clamp(11px, 0.78vw, 14px);
-    font-weight: 600; color: var(--ps-text-primary);
+    font-weight: 600;
+    color: var(--ps-text-primary);
+    text-align: center;
   }
-  .ps-cpw-photo-dropzone-hint {
+  .ps-cpw-dropzone-hint {
     font-size: clamp(9px, 0.62vw, 12px);
     color: var(--ps-text-muted);
+    letter-spacing: 0.04em;
   }
-  .ps-cpw-photo-frame {
+
+  /* Photo preview frame (after upload) */
+  .ps-cpw-photo-preview-frame {
     position: relative;
     flex: 1; min-height: 0;
     width: 100%;
     background: var(--ps-bg-secondary);
-    border-radius: clamp(8px, 0.6vw, 14px);
+    border-radius: clamp(10px, 0.75vw, 16px);
     overflow: hidden;
     border: 1px solid var(--ps-border-subtle);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-cpw-photo-preview-img {
+    width: 100%; height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .ps-cpw-photo-retake-pill {
+    position: absolute;
+    bottom: clamp(8px, 0.7vw, 14px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255,255,255,0.95);
+    border: 1px solid var(--ps-border-subtle);
+    color: var(--ps-text-primary);
+    padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 20px);
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: clamp(10px, 0.7vw, 13px);
+    font-weight: 600;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    transition: background 0.22s, color 0.22s;
+  }
+  .ps-cpw-photo-retake-pill:hover {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    border-color: var(--ps-accent);
+  }
+  .ps-cpw-photo-remove {
+    position: absolute;
+    top: clamp(8px, 0.7vw, 14px);
+    right: clamp(8px, 0.7vw, 14px);
+    width: clamp(24px, 1.8vw, 34px);
+    height: clamp(24px, 1.8vw, 34px);
+    border-radius: 50%;
+    background: rgba(28, 29, 30, 0.7);
+    color: #FFFFFF;
+    border: none;
+    cursor: pointer;
+    font-size: clamp(14px, 1.1vw, 18px);
+    font-weight: 600;
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(6px);
+    transition: background 0.18s;
+  }
+  .ps-cpw-photo-remove:hover { background: rgba(28, 29, 30, 0.9); }
+
+  /* Photo guide checklist — soft tinted card on the right column */
+  .ps-cpw-photo-guide {
+    background: var(--ps-bg-secondary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    padding: clamp(12px, 1vw, 20px) clamp(14px, 1.1vw, 22px);
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 12px);
+    margin-top: auto;
+  }
+  .ps-cpw-photo-guide-title {
+    font-size: clamp(9px, 0.62vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ps-text-primary);
+  }
+  .ps-cpw-photo-guide-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.4vw, 10px);
+  }
+  .ps-cpw-photo-guide-list li {
+    display: flex; align-items: flex-start;
+    gap: clamp(6px, 0.55vw, 12px);
+    font-size: clamp(10px, 0.72vw, 13px);
+    line-height: 1.45;
+    color: var(--ps-text-secondary);
+  }
+  .ps-cpw-photo-guide-list li svg {
+    flex-shrink: 0;
+    width: clamp(12px, 0.9vw, 16px);
+    height: clamp(12px, 0.9vw, 16px);
+    color: var(--ps-accent);
+    margin-top: 0.15em;
   }
   .ps-cpw-photo-frame-img {
     width: 100%; height: 100%;
@@ -5044,101 +5179,141 @@ const STYLES = `
   }
 
   /* ════════════════════════════════════════════════════════════════
-     ProfileMeasurementsView (.ps-pmv-*) — full profile detail with
-     all body measurements, basics, saved sizes history, and actions.
+     ProfileMeasurementsView (.ps-pmv-*) — minimal monoline-icon
+     redesign. Two-column body: silhouette diagram on the left,
+     basics + measurements list (each with an inline line-art icon)
+     on the right. No avatar, no card boxes — just typography, icons
+     and a body diagram, all vw/clamp scaled.
      ════════════════════════════════════════════════════════════════ */
   .ps-pmv-root {
-    display: flex; flex-direction: column; gap: 24px;
-    padding: 4px 4px 24px;
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.3vw, 28px);
+    padding: clamp(2px, 0.25vw, 6px) clamp(2px, 0.25vw, 6px) clamp(14px, 1.3vw, 28px);
   }
+
+  /* Hero — name + eyebrow only, no avatar */
   .ps-pmv-hero {
-    display: flex; align-items: center; gap: 18px;
-    padding-bottom: 18px;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.35vw, 10px);
+    padding-bottom: clamp(10px, 0.95vw, 20px);
     border-bottom: 1px solid var(--ps-border-subtle);
   }
-  .ps-pmv-hero-avatar {
-    width: 76px; height: 76px;
-    border-radius: 50%;
-    background: var(--ps-bg-secondary);
-    border: 2px solid var(--ps-accent);
-    color: var(--ps-accent);
-    display: flex; align-items: center; justify-content: center;
-    overflow: hidden; flex-shrink: 0;
-  }
-  .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 {
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.16em; text-transform: uppercase;
+    font-size: clamp(9px, 0.6vw, 12px); font-weight: 700;
+    letter-spacing: 0.18em; text-transform: uppercase;
     color: var(--ps-accent);
-    margin-bottom: 6px;
   }
   .ps-pmv-hero-name {
-    font-size: 28px; font-weight: 700;
+    font-size: clamp(18px, 1.5vw, 32px); font-weight: 700;
     color: var(--ps-text-primary);
     margin: 0;
     letter-spacing: -0.01em;
+    line-height: 1.1;
   }
 
-  /* Basics row — height / weight / age stats */
-  .ps-pmv-basics {
+  /* Two-column split — diagram on left, data on right */
+  .ps-pmv-split {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
+    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
+    gap: clamp(16px, 1.6vw, 36px);
+    align-items: start;
   }
-  .ps-pmv-basic {
-    background: var(--ps-bg-secondary);
-    border: 1px solid var(--ps-border-subtle);
-    border-radius: 10px;
-    padding: 16px 18px;
-    display: flex; flex-direction: column; gap: 4px;
+  .ps-pmv-diagram {
+    display: flex; flex-direction: column; align-items: center;
+    gap: clamp(6px, 0.5vw, 12px);
+    padding: clamp(8px, 0.8vw, 18px) 0;
+    color: var(--ps-text-primary);
   }
+  .ps-pmv-body-diagram-svg {
+    width: 100%;
+    max-width: clamp(110px, 9vw, 180px);
+    height: auto;
+    color: var(--ps-text-primary);
+    opacity: 0.78;
+  }
+  .ps-pmv-diagram-caption {
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-pmv-data {
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.2vw, 26px);
+    min-width: 0;
+  }
+
+  /* Basics list — height / weight / age, inline icon + label + value */
+  .ps-pmv-basics {
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 14px);
+    padding-bottom: clamp(10px, 0.9vw, 18px);
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-pmv-basic-row {
+    display: flex; align-items: center;
+    gap: clamp(8px, 0.7vw, 16px);
+  }
+  .ps-pmv-basic-icon {
+    flex-shrink: 0;
+    width: clamp(14px, 1vw, 20px);
+    height: clamp(14px, 1vw, 20px);
+    color: var(--ps-text-muted);
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .ps-pmv-basic-icon svg { width: 100%; height: 100%; }
   .ps-pmv-basic-label {
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+    flex: 1; min-width: 0;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     color: var(--ps-text-muted);
   }
   .ps-pmv-basic-value {
-    font-size: 22px; font-weight: 700;
+    font-size: clamp(13px, 0.95vw, 18px);
+    font-weight: 700;
     color: var(--ps-text-primary);
     font-feature-settings: "tnum" 1;
+    text-align: right;
   }
 
-  /* Section blocks */
+  /* Section blocks (BODY MEASUREMENTS) */
   .ps-pmv-section {
-    display: flex; flex-direction: column; gap: 14px;
+    display: flex; flex-direction: column;
+    gap: clamp(8px, 0.7vw, 16px);
   }
   .ps-pmv-section-head {
-    display: flex; flex-direction: column; gap: 4px;
+    display: flex; flex-direction: column; gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-section-title {
-    font-size: 12px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
     color: var(--ps-text-primary);
   }
   .ps-pmv-section-title-row {
     display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
+    gap: clamp(8px, 0.7vw, 14px);
   }
   .ps-pmv-loading-pill {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 6px 12px;
+    display: inline-flex; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
+    padding: clamp(3px, 0.3vw, 7px) clamp(7px, 0.6vw, 14px);
     background: rgba(33, 84, 239, 0.08);
     color: var(--ps-accent);
     border-radius: 999px;
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.1em; text-transform: uppercase;
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
   }
   .ps-pmv-loading-spinner {
-    width: 12px; height: 12px;
-    border: 2px solid rgba(33, 84, 239, 0.25);
+    width: clamp(8px, 0.65vw, 14px);
+    height: clamp(8px, 0.65vw, 14px);
+    border: 1.5px solid rgba(33, 84, 239, 0.25);
     border-top-color: var(--ps-accent);
     border-radius: 50%;
     animation: ps-pmv-spin 0.8s linear infinite;
@@ -5146,141 +5321,111 @@ const STYLES = `
   @keyframes ps-pmv-spin {
     to { transform: rotate(360deg); }
   }
-  .ps-pmv-section-sub {
-    font-size: 12px; font-weight: 400;
-    color: var(--ps-text-muted);
-  }
 
-  /* Body measurements grid */
-  .ps-pmv-measure-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
+  /* Body measurements list — single column, icon + label + value rows */
+  .ps-pmv-measure-list {
+    display: flex; flex-direction: column;
   }
-  .ps-pmv-measure {
-    background: var(--ps-bg-primary);
-    border: 1px solid var(--ps-border-subtle);
-    border-radius: 10px;
-    padding: 12px 14px;
-    display: flex; flex-direction: column; gap: 4px;
+  .ps-pmv-measure-row {
+    display: flex; align-items: center;
+    gap: clamp(8px, 0.7vw, 16px);
+    padding: clamp(8px, 0.7vw, 14px) 0;
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-pmv-measure-row:last-child { border-bottom: none; }
+  .ps-pmv-measure-icon {
+    flex-shrink: 0;
+    width: clamp(14px, 1vw, 20px);
+    height: clamp(14px, 1vw, 20px);
+    color: var(--ps-text-muted);
+    display: inline-flex; align-items: center; justify-content: center;
   }
+  .ps-pmv-measure-icon svg { width: 100%; height: 100%; }
   .ps-pmv-measure-label {
-    font-size: 9px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase;
+    flex: 1; min-width: 0;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     color: var(--ps-text-muted);
   }
   .ps-pmv-measure-value {
-    font-size: 18px; font-weight: 700;
+    font-size: clamp(12px, 0.85vw, 16px);
+    font-weight: 700;
     color: var(--ps-text-primary);
     font-feature-settings: "tnum" 1;
+    text-align: right;
   }
   .ps-pmv-measure-value.ps-loading {
     color: var(--ps-border-color);
     animation: ps-pmv-shimmer 1.4s ease-in-out infinite;
   }
-  .ps-pmv-measure.ps-loading {
-    background: linear-gradient(
-      90deg,
-      var(--ps-bg-primary) 0%,
-      var(--ps-bg-secondary) 50%,
-      var(--ps-bg-primary) 100%
-    );
-    background-size: 200% 100%;
-    animation: ps-pmv-skeleton 1.6s ease-in-out infinite;
+  .ps-pmv-measure-row.ps-loading .ps-pmv-measure-icon,
+  .ps-pmv-measure-row.ps-loading .ps-pmv-measure-label {
+    opacity: 0.55;
   }
   @keyframes ps-pmv-shimmer {
     0%, 100% { opacity: 0.5; }
     50%      { opacity: 1; }
   }
-  @keyframes ps-pmv-skeleton {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
 
   /* Inline measurement edit inputs */
-  .ps-pmv-measure.ps-editing {
-    border-color: var(--ps-accent);
+  .ps-pmv-measure-row.ps-editing {
     background: rgba(33, 84, 239, 0.04);
   }
   .ps-pmv-measure-edit {
-    display: flex; align-items: baseline; gap: 4px;
+    display: flex; align-items: baseline;
+    gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-measure-input {
-    flex: 1; min-width: 0;
-    background: transparent; border: none; outline: none;
+    width: clamp(40px, 3vw, 70px);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--ps-border-color);
+    outline: none;
     font-family: inherit;
-    font-size: 18px; font-weight: 700;
+    font-size: clamp(12px, 0.85vw, 16px);
+    font-weight: 700;
     color: var(--ps-text-primary);
-    padding: 0;
+    padding: clamp(2px, 0.15vw, 4px) 0;
+    text-align: right;
     font-feature-settings: "tnum" 1;
   }
+  .ps-pmv-measure-input:focus {
+    border-bottom-color: var(--ps-accent);
+  }
   .ps-pmv-measure-input::-webkit-outer-spin-button,
   .ps-pmv-measure-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-pmv-measure-input[type="number"] { -moz-appearance: textfield; }
   .ps-pmv-measure-input-unit {
-    font-size: 11px; color: var(--ps-text-muted); font-weight: 500;
-  }
-
-  /* Saved sizes history (per-product cache) — kept for backwards compat,
-     no longer rendered inside ProfileMeasurementsView */
-  .ps-pmv-history {
-    display: flex; flex-direction: column; gap: 8px;
-  }
-  .ps-pmv-history-card {
-    display: flex; align-items: center; gap: 12px;
-    padding: 12px;
-    background: var(--ps-bg-primary);
-    border: 1px solid var(--ps-border-subtle);
-    border-radius: 10px;
-  }
-  .ps-pmv-history-thumb {
-    width: 44px; height: 44px;
-    border-radius: 6px; overflow: hidden;
-    background: var(--ps-bg-secondary);
-    flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .ps-pmv-history-thumb img {
-    max-width: 100%; max-height: 100%; object-fit: contain;
-  }
-  .ps-pmv-history-info {
-    flex: 1; min-width: 0;
-    display: flex; flex-direction: column; gap: 2px;
-  }
-  .ps-pmv-history-name {
-    font-size: 13px; font-weight: 600;
-    color: var(--ps-text-primary);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .ps-pmv-history-meta {
-    font-size: 10px;
+    font-size: clamp(8px, 0.55vw, 11px);
     color: var(--ps-text-muted);
-  }
-  .ps-pmv-history-size {
-    font-size: 22px; font-weight: 700;
-    color: var(--ps-accent);
-    font-feature-settings: "tnum" 1;
+    font-weight: 500;
   }
 
   /* Actions */
   .ps-pmv-actions {
     display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
-    padding-top: 18px;
+    gap: clamp(8px, 0.7vw, 14px);
+    padding-top: clamp(12px, 1vw, 22px);
     border-top: 1px solid var(--ps-border-subtle);
-    margin-top: 4px;
+    margin-top: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-actions-right {
-    display: flex; align-items: center; gap: 8px;
+    display: flex; align-items: center;
+    gap: clamp(6px, 0.5vw, 12px);
   }
   .ps-pmv-btn-secondary,
   .ps-pmv-btn-edit,
   .ps-pmv-btn-delete {
-    background: none; border: 1px solid var(--ps-border-color);
-    border-radius: 6px;
-    padding: 10px 16px;
-    font-family: inherit; font-size: 11px; font-weight: 600;
-    letter-spacing: 0.06em;
+    background: none;
+    border: 1px solid var(--ps-border-color);
+    border-radius: clamp(4px, 0.35vw, 8px);
+    padding: clamp(6px, 0.55vw, 12px) clamp(10px, 0.9vw, 20px);
+    font-family: inherit;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 600;
+    letter-spacing: 0.08em;
     color: var(--ps-text-secondary);
     cursor: pointer;
     transition: border-color 0.15s, color 0.15s;
@@ -5296,14 +5441,19 @@ const STYLES = `
   }
   .ps-pmv-btn-primary {
     background: var(--ps-accent); color: #FFFFFF;
-    border: none; border-radius: 6px;
-    padding: 11px 18px;
-    font-family: inherit; font-size: 11px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase;
+    border: none;
+    border-radius: clamp(4px, 0.35vw, 8px);
+    padding: clamp(7px, 0.65vw, 14px) clamp(12px, 1vw, 22px);
+    font-family: inherit;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     cursor: pointer;
     transition: opacity 0.15s, transform 0.15s, background 0.2s;
-    box-shadow: 0 4px 14px rgba(33, 84, 239, 0.18);
-    display: inline-flex; align-items: center; gap: 8px;
+    box-shadow: 0 0.3vw 1vw rgba(33, 84, 239, 0.18);
+    display: inline-flex; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
     justify-content: center;
   }
   .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }
@@ -5315,22 +5465,14 @@ const STYLES = `
     opacity: 0.65;
   }
   .ps-pmv-btn-spinner {
-    width: 12px; height: 12px;
-    border: 2px solid rgba(255, 255, 255, 0.35);
+    width: clamp(8px, 0.65vw, 14px);
+    height: clamp(8px, 0.65vw, 14px);
+    border: 1.5px solid rgba(255, 255, 255, 0.35);
     border-top-color: #FFFFFF;
     border-radius: 50%;
     animation: ps-pmv-spin 0.8s linear infinite;
   }
 
-  @media (max-width: 768px) {
-    .ps-pmv-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
-    .ps-pmv-hero-name { font-size: 22px; }
-    .ps-pmv-basics { grid-template-columns: 1fr; }
-    .ps-pmv-measure-grid { grid-template-columns: repeat(2, 1fr); }
-    .ps-pmv-actions { flex-direction: column; align-items: stretch; gap: 10px; }
-    .ps-pmv-actions-right { flex-wrap: wrap; }
-  }
-
   /* Big product / try-on image */
   .ps-msd-image {
     width: 100%; height: 420px;
@@ -9213,27 +9355,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
         ] })
       ] }, "bra"),
       mode === "manual" && error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error }),
-      mode === "image" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-combined ps-cpw-fade-in", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-cpw-pill-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("NAME") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              className: "ps-bp-inline-input",
-              value: name,
-              placeholder: t("e.g. My Photo Profile"),
-              onChange: (e) => {
-                setName(e.target.value);
-                setError("");
-              }
-            }
-          ) })
-        ] }) }),
+      mode === "image" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-split ps-cpw-fade-in", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -9244,8 +9366,8 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
             onChange: handlePhotoSelect
           }
         ),
-        photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-frame", children: [
-          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-frame-img" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-cpw-image-left", children: photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview-frame", children: [
+          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-preview-img" }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -9255,26 +9377,84 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               "aria-label": t("Remove photo"),
               children: "×"
             }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-cpw-photo-retake-pill",
+              onClick: () => photoInputRef.current?.click(),
+              children: t("Retake")
+            }
           )
         ] }) : /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: "ps-cpw-photo-dropzone",
+            className: "ps-cpw-dropzone",
             onClick: () => photoInputRef.current?.click(),
             disabled: photoUploading,
             children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "36", height: "36", children: [
-                /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-                /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+              /* @__PURE__ */ jsxs("svg", { className: "ps-cpw-dropzone-silhouette", viewBox: "0 0 80 200", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "40", cy: "20", r: "13" }),
+                /* @__PURE__ */ jsx("path", { d: "M40 35 L40 110 M22 60 L22 105 M58 60 L58 105 M22 60 Q40 50 58 60 M40 110 L25 195 M40 110 L55 195" })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-title", children: photoUploading ? t("Processing...") : t("Tap to upload a photo") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-hint", children: t("JPEG / PNG / WebP up to 10MB") })
+              /* @__PURE__ */ jsxs("div", { className: "ps-cpw-dropzone-content", children: [
+                /* @__PURE__ */ jsxs("svg", { className: "ps-cpw-dropzone-upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-title", children: photoUploading ? t("Processing…") : t("Drop a photo or click to upload") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-hint", children: t("JPEG · PNG · WebP · up to 10MB") })
+              ] })
             ]
           }
-        ),
-        error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-cpw-pill-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("NAME") }),
+            /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "ps-bp-inline-input",
+                value: name,
+                placeholder: t("e.g. My Photo Profile"),
+                onChange: (e) => {
+                  setName(e.target.value);
+                  setError("");
+                }
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-guide", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-cpw-photo-guide-title", children: t("HOW TO TAKE A GOOD PHOTO") }),
+            /* @__PURE__ */ jsxs("ul", { className: "ps-cpw-photo-guide-list", children: [
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Stand straight, arms relaxed at your sides")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Full body in frame, head to toes")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Form-fitting clothing, no loose layers")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Plain background, neutral lighting")
+              ] })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+        ] })
       ] }, "image-combined")
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-footer", children: [
@@ -9293,26 +9473,95 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     ] })
   ] });
 }
+const HeightIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+  /* @__PURE__ */ jsx("polyline", { points: "7 6 12 3 17 6" }),
+  /* @__PURE__ */ jsx("polyline", { points: "7 18 12 21 17 18" })
+] });
+const WeightIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 7h14l-1.5 12a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2L5 7z" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 7a3 3 0 0 1 6 0" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "11", x2: "12", y2: "15" })
+] });
+const AgeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 7 12 12 15 14" })
+] });
+const ChestIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 8 L8 5 L16 5 L20 8 L20 13 L17 11 L17 17 L7 17 L7 11 L4 13 Z" }) });
+const BustIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 9 Q12 3 19 9" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "13", r: "2.5" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "13", r: "2.5" })
+] });
+const WaistIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 4 Q10 4 10 9 Q10 12 6 14" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 4 Q14 4 14 9 Q14 12 18 14" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 14 Q10 16 10 20" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 14 Q14 16 14 20" })
+] });
+const HipsIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M7 4 Q10 4 10 9 Q10 11 9 13" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 4 Q14 4 14 9 Q14 11 15 13" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 14 Q12 22 19 14" })
+] });
+const ShoulderIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "2.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 13 Q8 9 12 9 Q16 9 20 13" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" })
+] });
+const SleeveIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 6 L8 4 L12 6 L11 11 L9 21 L5 21 L5 11 Z" }) });
+const NeckIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 9 L9 13 Q9 15 12 15 Q15 15 15 13 L15 9" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 17 Q12 19 19 17" })
+] });
+const InseamIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "15", y2: "3" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "21", x2: "15", y2: "21" })
+] });
+const ThighIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M8 4 Q10 8 10 14 L9 21" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 4 Q14 8 14 14 L15 21" }),
+  /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "11", rx: "6", ry: "2" })
+] });
 const FIELDS_MEN = [
-  { key: "chest", label: "CHEST" },
-  { key: "waist", label: "WAIST" },
-  { key: "hips", label: "HIPS" },
-  { key: "shoulderWidth", label: "SHOULDER" },
-  { key: "sleeveLength", label: "SLEEVE" },
-  { key: "neckCircumference", label: "NECK" },
-  { key: "inseam", label: "INSEAM" },
-  { key: "thighCircumference", label: "THIGH" }
+  { key: "chest", label: "CHEST", Icon: ChestIcon },
+  { key: "waist", label: "WAIST", Icon: WaistIcon },
+  { key: "hips", label: "HIPS", Icon: HipsIcon },
+  { key: "shoulderWidth", label: "SHOULDER", Icon: ShoulderIcon },
+  { key: "sleeveLength", label: "SLEEVE", Icon: SleeveIcon },
+  { key: "neckCircumference", label: "NECK", Icon: NeckIcon },
+  { key: "inseam", label: "INSEAM", Icon: InseamIcon },
+  { key: "thighCircumference", label: "THIGH", Icon: ThighIcon }
 ];
 const FIELDS_WOMEN = [
-  { key: "bust", label: "BUST" },
-  { key: "waist", label: "WAIST" },
-  { key: "hips", label: "HIPS" },
-  { key: "shoulderWidth", label: "SHOULDER" },
-  { key: "sleeveLength", label: "SLEEVE" },
-  { key: "neckCircumference", label: "NECK" },
-  { key: "inseam", label: "INSEAM" },
-  { key: "thighCircumference", label: "THIGH" }
+  { key: "bust", label: "BUST", Icon: BustIcon },
+  { key: "waist", label: "WAIST", Icon: WaistIcon },
+  { key: "hips", label: "HIPS", Icon: HipsIcon },
+  { key: "shoulderWidth", label: "SHOULDER", Icon: ShoulderIcon },
+  { key: "sleeveLength", label: "SLEEVE", Icon: SleeveIcon },
+  { key: "neckCircumference", label: "NECK", Icon: NeckIcon },
+  { key: "inseam", label: "INSEAM", Icon: InseamIcon },
+  { key: "thighCircumference", label: "THIGH", Icon: ThighIcon }
 ];
+const BodyDiagram = ({ female }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 320", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", className: "ps-pmv-body-diagram-svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "60", cy: "28", r: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "60", y1: "46", x2: "60", y2: "58" }),
+  female ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M30 70 Q35 65 60 65 Q85 65 90 70" }),
+    /* @__PURE__ */ jsx("path", { d: "M30 70 Q26 110 32 145 Q40 165 60 168 Q80 165 88 145 Q94 110 90 70" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M22 72 Q32 62 60 62 Q88 62 98 72" }),
+    /* @__PURE__ */ jsx("path", { d: "M22 72 Q24 110 32 145 Q42 162 60 165 Q78 162 88 145 Q96 110 98 72" })
+  ] }),
+  /* @__PURE__ */ jsx("path", { d: "M22 72 Q12 130 18 175" }),
+  /* @__PURE__ */ jsx("path", { d: "M98 72 Q108 130 102 175" }),
+  /* @__PURE__ */ jsx("path", { d: "M40 168 L36 295" }),
+  /* @__PURE__ */ jsx("path", { d: "M80 168 L84 295" }),
+  /* @__PURE__ */ jsx("line", { x1: "30", y1: "295", x2: "42", y2: "295" }),
+  /* @__PURE__ */ jsx("line", { x1: "78", y1: "295", x2: "90", y2: "295" })
+] });
 function ProfileMeasurementsView({
   profile,
   isActive,
@@ -9372,60 +9621,64 @@ function ProfileMeasurementsView({
   const ageDisplay = profile.age ? `${profile.age}` : "—";
   return /* @__PURE__ */ jsxs("div", { className: "ps-pmv-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-pmv-hero", children: [
-      /* @__PURE__ */ jsx("div", { className: "ps-pmv-hero-avatar", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", children: [
-        /* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-hero-info", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-hero-eyebrow", children: isActive ? t("ACTIVE PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }),
-        /* @__PURE__ */ jsx("h2", { className: "ps-pmv-hero-name", children: profile.name })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "ps-pmv-hero-eyebrow", children: isActive ? t("ACTIVE PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }),
+      /* @__PURE__ */ jsx("h2", { className: "ps-pmv-hero-name", children: profile.name })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basics", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("HEIGHT") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: heightDisplay })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("WEIGHT") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: weightDisplay })
+    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-split", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-diagram", children: [
+        /* @__PURE__ */ jsx(BodyDiagram, { female: profile.gender === "female" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-diagram-caption", children: t("Reference figure") })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("AGE") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: ageDisplay })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-head", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-title-row", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("BODY MEASUREMENTS") }),
-          !hasMeasurements && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-loading-pill", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-pmv-loading-spinner" }),
-            /* @__PURE__ */ jsx("span", { children: t("Calculating...") })
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-data", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basics", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(HeightIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("HEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: heightDisplay })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(WeightIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("WEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: weightDisplay })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(AgeIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("AGE") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: ageDisplay })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: hasMeasurements ? editing ? t("Tap any value to edit. Save when you're done.") : t("Calculated from your basics. Used to recommend the perfect size for any product.") : t("Our AI is computing your full body proportions — this usually takes a few seconds.") })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-grid", children: fields.map((f) => {
-        const v = measurements[f.key];
-        return /* @__PURE__ */ jsxs("div", { className: `ps-pmv-measure${v == null && !editing ? " ps-loading" : ""}${editing ? " ps-editing" : ""}`, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-label", children: t(f.label) }),
-          editing ? /* @__PURE__ */ jsxs("div", { className: "ps-pmv-measure-edit", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "decimal",
-                className: "ps-pmv-measure-input",
-                value: draft[f.key] ?? "",
-                placeholder: "—",
-                onChange: (e) => handleDraftChange(f.key, e.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-input-unit", children: unit })
-          ] }) : /* @__PURE__ */ jsx("div", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
-        ] }, f.key);
-      }) })
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-head", children: /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-title-row", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("BODY MEASUREMENTS") }),
+            !hasMeasurements && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-loading-pill", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-loading-spinner" }),
+              /* @__PURE__ */ jsx("span", { children: t("Calculating...") })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-list", children: fields.map((f) => {
+            const v = measurements[f.key];
+            const Icon = f.Icon;
+            return /* @__PURE__ */ jsxs("div", { className: `ps-pmv-measure-row${v == null && !editing ? " ps-loading" : ""}${editing ? " ps-editing" : ""}`, children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-label", children: t(f.label) }),
+              editing ? /* @__PURE__ */ jsxs("div", { className: "ps-pmv-measure-edit", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    inputMode: "decimal",
+                    className: "ps-pmv-measure-input",
+                    value: draft[f.key] ?? "",
+                    placeholder: "—",
+                    onChange: (e) => handleDraftChange(f.key, e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-input-unit", children: unit })
+              ] }) : /* @__PURE__ */ jsx("span", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
+            ] }, f.key);
+          }) })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: editing ? handleEditCancel : onBack, children: editing ? t("Cancel") : t("Back") }),