@primestyleai/tryon 3.5.1 → 3.6.1

package/dist/react/index.d.ts

@@ -6,6 +6,10 @@ export interface PrimeStyleTryonProps {
     buttonText?: string;
     apiUrl?: string;
     showPoweredBy?: boolean;
+    /** Show the default camera icon in the button. Defaults to true. Set to false to hide it. */
+    showIcon?: boolean;
+    /** Custom icon element to replace the default camera icon. Pass any React node (e.g. an <svg> or <img>). */
+    buttonIcon?: React.ReactNode;
     buttonStyles?: ButtonStyles;
     modalStyles?: ModalStyles;
     classNames?: PrimeStyleClassNames;

package/dist/react/index.js

@@ -184,6 +184,8 @@ function PrimeStyleTryonInner({
   buttonText = "Virtual Try-On",
   apiUrl,
   showPoweredBy = true,
+  showIcon = true,
+  buttonIcon,
   buttonStyles: btnS = {},
   modalStyles: mdlS = {},
   classNames: cn = {},
@@ -1299,7 +1301,7 @@ function PrimeStyleTryonInner({
   }
   return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { ...cssVars, ...style }, "data-ps-tryon": true, children: [
     /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
-      /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
+      showIcon !== false && (buttonIcon || /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") })),
       /* @__PURE__ */ jsx("span", { children: buttonText })
     ] }),
     view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), onClick: (e) => {
@@ -1331,16 +1333,17 @@ const STYLES = `
   .ps-tryon-root { display: inline-block; }
 
   .ps-tryon-btn {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: var(--ps-btn-padding, 12px 24px);
+    display: inline-flex; align-items: center; gap: clamp(5px, 0.42vw, 8px);
+    padding: var(--ps-btn-padding, clamp(8px, 0.63vw, 12px) clamp(14px, 1.25vw, 24px));
     background: var(--ps-btn-bg, #bb945c); color: var(--ps-btn-color, #111211);
     font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
-    font-size: var(--ps-btn-font-size, 14px); font-weight: var(--ps-btn-font-weight, 600);
-    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 8px);
+    font-size: var(--ps-btn-font-size, clamp(10px, 0.73vw, 14px)); font-weight: var(--ps-btn-font-weight, 600);
+    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, clamp(5px, 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;
   }
+  .ps-tryon-btn svg { width: clamp(14px, 0.94vw, 18px); height: clamp(14px, 0.94vw, 18px); }
   .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, #a07d4e); transform: translateY(-1px); }
   .ps-tryon-btn:active { transform: translateY(0); }
 
@@ -1348,8 +1351,8 @@ const STYLES = `
     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;
-    padding: 16px;
-    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+    padding: clamp(10px, 0.83vw, 16px);
+    padding: max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-top)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-right)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-bottom)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-left));
     animation: ps-fade-in 0.2s ease;
     overflow-y: auto; -webkit-overflow-scrolling: touch;
   }
@@ -1357,243 +1360,243 @@ const STYLES = `
 
   .ps-tryon-modal {
     background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
-    border-radius: var(--ps-modal-radius, 16px); width: var(--ps-modal-width, 100%);
-    max-width: var(--ps-modal-max-width, 520px); max-height: 92vh; overflow-y: auto;
+    border-radius: var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)); width: var(--ps-modal-width, 100%);
+    max-width: var(--ps-modal-max-width, clamp(380px, 27vw, 520px)); max-height: 92vh; overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
-    box-shadow: 0 25px 50px rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
+    box-shadow: 0 clamp(16px, 1.3vw, 25px) clamp(32px, 2.6vw, 50px) rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: #333 transparent;
     flex-shrink: 0;
   }
-  .ps-tryon-modal-wide { max-width: 920px; }
+  .ps-tryon-modal-wide { max-width: clamp(680px, 48vw, 920px); }
   .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
-  @keyframes ps-slide-up { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
+  @keyframes ps-slide-up { from { transform: translateY(clamp(12px, 1.04vw, 20px)) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
   /* Header */
   .ps-tryon-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 18px 24px; background: var(--ps-modal-header-bg, #1a1b1a);
+    padding: clamp(10px, 0.94vw, 18px) clamp(14px, 1.25vw, 24px); background: var(--ps-modal-header-bg, #1a1b1a);
     border-bottom: 1px solid #333;
-    border-radius: var(--ps-modal-radius, 16px) var(--ps-modal-radius, 16px) 0 0;
+    border-radius: var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)) var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)) 0 0;
   }
-  .ps-tryon-title { font-size: 15px; font-weight: 600; color: var(--ps-modal-header-color, #fff); }
-  .ps-tryon-header-actions { display: flex; align-items: center; gap: 8px; }
+  .ps-tryon-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; color: var(--ps-modal-header-color, #fff); }
+  .ps-tryon-header-actions { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-header-icon {
-    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    width: clamp(24px, 1.77vw, 34px); height: clamp(24px, 1.77vw, 34px); display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: #999; transition: all 0.2s;
   }
   .ps-tryon-header-icon:hover { border-color: #bb945c; color: #bb945c; }
   .ps-tryon-header-icon svg { stroke: currentColor; fill: none; }
   .ps-tryon-close {
-    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
+    width: clamp(22px, 1.67vw, 32px); height: clamp(22px, 1.67vw, 32px); display: flex; align-items: center; justify-content: center;
     background: none; border: none; color: var(--ps-modal-close-color, #999);
-    cursor: pointer; border-radius: 6px; transition: background 0.15s;
+    cursor: pointer; border-radius: clamp(4px, 0.31vw, 6px); transition: background 0.15s;
   }
   .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
   /* Stepper */
-  .ps-tryon-stepper { padding: 20px 24px 12px; }
+  .ps-tryon-stepper { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px) clamp(7px, 0.63vw, 12px); }
   .ps-tryon-stepper-track { display: flex; align-items: flex-start; }
   .ps-tryon-stepper-fragment { display: flex; align-items: flex-start; flex: 1; }
   .ps-tryon-stepper-fragment:first-child { flex: 0 0 auto; }
-  .ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: 14px; transition: background 0.4s; }
+  .ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: clamp(8px, 0.73vw, 14px); transition: background 0.4s; }
   .ps-tryon-stepper-line.ps-done { background: #bb945c; }
   .ps-tryon-stepper-step { display: flex; flex-direction: column; align-items: center; }
   .ps-tryon-stepper-circle {
-    width: 28px; height: 28px; border-radius: 50%;
+    width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
-    border: 2px solid #333; font-size: 12px; font-weight: 600; color: #666;
+    border: 2px solid #333; font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; color: #666;
     transition: all 0.3s;
   }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle { background: #bb945c; border-color: #bb945c; color: #111; }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle svg { stroke: #111; }
-  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 4px rgba(187,148,92,0.15); }
-  .ps-tryon-stepper-label { font-size: 10px; margin-top: 5px; color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
+  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 clamp(3px, 0.21vw, 4px) rgba(187,148,92,0.15); }
+  .ps-tryon-stepper-label { font-size: clamp(8px, 0.52vw, 10px); margin-top: clamp(3px, 0.26vw, 5px); color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-label { color: #bb945c; }
   .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-label { color: #bb945c; font-weight: 700; }
 
   /* Body */
-  .ps-tryon-body { padding: 24px; min-height: 300px; }
-  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+  .ps-tryon-body { padding: clamp(14px, 1.25vw, 24px); min-height: clamp(200px, 15.6vw, 300px); }
+  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(clamp(7px, 0.63vw, 12px)); } to { opacity: 1; transform: translateY(0); } }
   .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
   .ps-tryon-welcome { text-align: center; }
-  .ps-tryon-welcome-hero { margin-bottom: 20px; }
+  .ps-tryon-welcome-hero { margin-bottom: clamp(12px, 1.04vw, 20px); }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: 120px; height: 140px; object-fit: cover; border-radius: 14px; border: 2px solid #333; }
-  .ps-tryon-welcome-sparkle { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
-  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 14px; height: 14px; }
-  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
-  .ps-tryon-welcome-title { font-size: 20px; font-weight: 700; color: #fff; margin: 14px 0 4px; }
-  .ps-tryon-welcome-sub { font-size: 13px; color: #999; margin: 0; }
-  .ps-tryon-features { display: flex; gap: 10px; margin: 20px 0; }
-  .ps-tryon-feature { flex: 1; padding: 14px 10px; border: 1px solid #333; border-radius: 12px; text-align: center; }
-  .ps-tryon-feature-icon { margin-bottom: 6px; color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-welcome-product { width: clamp(80px, 6.25vw, 120px); height: clamp(96px, 7.3vw, 140px); object-fit: cover; border-radius: clamp(8px, 0.73vw, 14px); border: 2px solid #333; }
+  .ps-tryon-welcome-sparkle { position: absolute; top: clamp(-6px, -0.42vw, -8px); right: clamp(-6px, -0.42vw, -8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
+  .ps-tryon-welcome-sparkle svg { stroke: #111; width: clamp(10px, 0.73vw, 14px); height: clamp(10px, 0.73vw, 14px); }
+  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(clamp(-4px, -0.31vw, -6px)); } }
+  .ps-tryon-welcome-title { font-size: clamp(14px, 1.04vw, 20px); font-weight: 700; color: #fff; margin: clamp(8px, 0.73vw, 14px) 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-welcome-sub { font-size: clamp(10px, 0.68vw, 13px); color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: clamp(6px, 0.52vw, 10px); margin: clamp(12px, 1.04vw, 20px) 0; }
+  .ps-tryon-feature { flex: 1; padding: clamp(8px, 0.73vw, 14px) clamp(6px, 0.52vw, 10px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); text-align: center; }
+  .ps-tryon-feature-icon { margin-bottom: clamp(4px, 0.31vw, 6px); color: #bb945c; display: flex; justify-content: center; }
   .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-feature-title { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 2px; }
-  .ps-tryon-feature-desc { font-size: 10px; color: #999; }
+  .ps-tryon-feature-title { font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: clamp(8px, 0.52vw, 10px); color: #999; }
   .ps-tryon-cta {
-    width: 100%; padding: 14px; background: #bb945c; color: #111; border: none;
-    border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
-    display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
+    width: 100%; padding: clamp(8px, 0.73vw, 14px); background: #bb945c; color: #111; border: none;
+    border-radius: clamp(8px, 0.63vw, 12px); font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: clamp(5px, 0.42vw, 8px); transition: all 0.2s;
     font-family: var(--ps-modal-font, system-ui, sans-serif);
   }
   .ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
   .ps-tryon-cta svg { stroke: #111; }
-  .ps-tryon-welcome-note { font-size: 11px; color: #666; margin-top: 12px; }
+  .ps-tryon-welcome-note { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin-top: clamp(7px, 0.63vw, 12px); }
 
   /* Upload */
   .ps-tryon-upload {
-    border: 2px dashed var(--ps-upload-border, #333); border-radius: 12px;
-    padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s;
+    border: 2px dashed var(--ps-upload-border, #333); border-radius: clamp(8px, 0.63vw, 12px);
+    padding: clamp(24px, 2.08vw, 40px) clamp(14px, 1.25vw, 24px); text-align: center; cursor: pointer; transition: all 0.2s;
     background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;
   }
   .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: #bb945c; background: rgba(187,148,92,0.05); }
-  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: 12px; }
-  .ps-tryon-upload-text { font-size: 14px; color: var(--ps-upload-color, #fff); margin: 0 0 4px; }
-  .ps-tryon-upload-hint { font-size: 12px; color: #999; margin: 0; }
-  .ps-tryon-preview { position: relative; margin-bottom: 4px; }
-  .ps-tryon-preview img { width: 100%; border-radius: 12px; display: block; }
+  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-upload-text { font-size: clamp(10px, 0.73vw, 14px); color: var(--ps-upload-color, #fff); margin: 0 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-upload-hint { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
+  .ps-tryon-preview { position: relative; margin-bottom: clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-preview img { width: 100%; border-radius: clamp(8px, 0.63vw, 12px); display: block; }
   .ps-tryon-preview-remove {
-    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
+    position: absolute; top: clamp(5px, 0.42vw, 8px); right: clamp(5px, 0.42vw, 8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px);
     border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
     cursor: pointer; display: flex; align-items: center; justify-content: center;
-    font-size: 16px; transition: background 0.15s;
+    font-size: clamp(12px, 0.83vw, 16px); transition: background 0.15s;
   }
   .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
   .ps-tryon-submit {
-    width: 100%; padding: 14px; margin-top: 16px;
+    width: 100%; padding: clamp(8px, 0.73vw, 14px); margin-top: clamp(10px, 0.83vw, 16px);
     background: var(--ps-modal-primary-bg, #bb945c); color: var(--ps-modal-primary-color, #111);
     font-family: var(--ps-modal-font, system-ui, sans-serif);
-    font-size: 14px; font-weight: 600; border: none;
-    border-radius: var(--ps-modal-primary-radius, 10px);
+    font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; border: none;
+    border-radius: var(--ps-modal-primary-radius, clamp(6px, 0.52vw, 10px));
     cursor: pointer; transition: all 0.2s;
-    display: flex; align-items: center; justify-content: center; gap: 8px;
+    display: flex; align-items: center; justify-content: center; gap: clamp(5px, 0.42vw, 8px);
   }
   .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
   .ps-tryon-submit svg { stroke: currentColor; }
 
   /* Profile bar */
-  .ps-tryon-profile-bar { margin-bottom: 16px; }
+  .ps-tryon-profile-bar { margin-bottom: clamp(10px, 0.83vw, 16px); }
   .ps-tryon-profile-select {
-    width: 100%; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    width: 100%; padding: clamp(6px, 0.52vw, 10px) clamp(22px, 1.88vw, 36px) clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit;
     appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 14px center;
+    background-repeat: no-repeat; background-position: right clamp(8px, 0.73vw, 14px) center;
   }
   .ps-tryon-profile-select:focus { border-color: #bb945c; }
 
   /* Sizing choice */
   .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 16px; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 10px; }
+  .ps-tryon-section-title { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; margin: 0 0 clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
   .ps-tryon-choice-card {
-    display: flex; align-items: center; gap: 14px; padding: 16px;
-    border: 1.5px solid #333; border-radius: 12px;
+    display: flex; align-items: center; gap: clamp(8px, 0.73vw, 14px); padding: clamp(10px, 0.83vw, 16px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.63vw, 12px);
     background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
     width: 100%; font-family: inherit; position: relative; overflow: hidden;
   }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(187,148,92,0.08); }
+  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 clamp(4px, 0.31vw, 6px) clamp(12px, 1.04vw, 20px) rgba(187,148,92,0.08); }
   .ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
   .ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
   .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
   .ps-tryon-choice-info { flex: 1; min-width: 0; }
-  .ps-tryon-choice-title { font-size: 14px; font-weight: 600; color: #fff; }
-  .ps-tryon-choice-desc { font-size: 12px; color: #999; margin-top: 2px; }
+  .ps-tryon-choice-title { font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; color: #fff; }
+  .ps-tryon-choice-desc { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin-top: 2px; }
   .ps-tryon-choice-badge {
-    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 10px; font-weight: 600;
+    padding: clamp(2px, 0.16vw, 3px) clamp(6px, 0.52vw, 10px); border-radius: clamp(12px, 1.04vw, 20px); flex-shrink: 0;
+    background: rgba(187,148,92,0.12); color: #bb945c; font-size: clamp(8px, 0.52vw, 10px); font-weight: 600;
   }
   .ps-tryon-sg-notice {
-    font-size: 12px; color: #999; text-align: center; padding: 10px 14px;
-    margin-bottom: 12px; border: 1px solid #333; border-radius: 10px; background: #1a1b1a;
+    font-size: clamp(9px, 0.63vw, 12px); color: #999; text-align: center; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px);
+    margin-bottom: clamp(7px, 0.63vw, 12px); border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: #1a1b1a;
   }
   .ps-tryon-sg-found {
     color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05);
-    display: flex; align-items: center; justify-content: center; gap: 6px;
+    display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.31vw, 6px);
   }
   .ps-tryon-sg-found svg { stroke: #4ade80; }
-  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
-  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 16px; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 2.08vw, 40px) clamp(12px, 1.04vw, 20px); text-align: center; }
+  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: clamp(10px, 0.83vw, 16px); animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
   .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
   @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
-  .ps-tryon-sg-checking-bar-wrap { width: 180px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
+  .ps-tryon-sg-checking-bar-wrap { width: clamp(120px, 9.4vw, 180px); height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: clamp(12px, 1.04vw, 20px); }
   .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #bb945c, #d6ba7d); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }
   @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
-  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 6px; }
-  .ps-tryon-sg-checking-sub { font-size: 13px; color: #999; margin: 0; }
+  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-sg-checking-sub { font-size: clamp(10px, 0.68vw, 13px); color: #999; margin: 0; }
 
   /* Back button */
-  .ps-tryon-back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #999; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 12px; font-family: inherit; transition: color 0.2s; }
+  .ps-tryon-back { display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); background: none; border: none; color: #999; font-size: clamp(10px, 0.68vw, 13px); cursor: pointer; padding: 0; margin-bottom: clamp(7px, 0.63vw, 12px); font-family: inherit; transition: color 0.2s; }
   .ps-tryon-back:hover { color: #fff; }
   .ps-tryon-back svg { stroke: currentColor; fill: none; }
 
   /* Sizing form */
-  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
-  .ps-tryon-input-row { display: flex; align-items: center; gap: 10px; }
-  .ps-tryon-input-row label { font-size: 13px; font-weight: 500; color: #ccc; min-width: 90px; flex-shrink: 0; }
+  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-input-row { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-input-row label { font-size: clamp(10px, 0.68vw, 13px); font-weight: 500; color: #ccc; min-width: clamp(60px, 4.7vw, 90px); flex-shrink: 0; }
   .ps-tryon-input-row input {
-    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.73vw, 14px); font-family: inherit; outline: none;
     transition: border-color 0.2s; -moz-appearance: textfield;
   }
   .ps-tryon-input-row input::-webkit-outer-spin-button,
   .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-input-row input:focus { border-color: #bb945c; }
-  .ps-tryon-input-unit { font-size: 12px; color: #666; flex-shrink: 0; }
-  .ps-tryon-height-ft { display: flex; align-items: center; gap: 6px; flex: 1; }
-  .ps-tryon-height-ft input { width: 60px; padding: 10px 10px; border: 1.5px solid #333; border-radius: 10px; background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
+  .ps-tryon-input-unit { font-size: clamp(9px, 0.63vw, 12px); color: #666; flex-shrink: 0; }
+  .ps-tryon-height-ft { display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); flex: 1; }
+  .ps-tryon-height-ft input { width: clamp(42px, 3.13vw, 60px); padding: clamp(6px, 0.52vw, 10px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.73vw, 14px); font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
   .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-height-ft input:focus { border-color: #bb945c; }
-  .ps-tryon-height-ft span { font-size: 12px; color: #666; }
+  .ps-tryon-height-ft span { font-size: clamp(9px, 0.63vw, 12px); color: #666; }
   .ps-tryon-country-select {
-    flex: 1; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(22px, 1.88vw, 36px) clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit;
     appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 14px center;
+    background-repeat: no-repeat; background-position: right clamp(8px, 0.73vw, 14px) center;
   }
   .ps-tryon-country-select:focus { border-color: #bb945c; }
-  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: 8px; overflow: hidden; }
+  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: clamp(5px, 0.42vw, 8px); overflow: hidden; }
   .ps-tryon-unit-btn {
-    padding: 6px 14px; background: transparent; border: none; color: #999;
-    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
+    padding: clamp(4px, 0.31vw, 6px) clamp(8px, 0.73vw, 14px); background: transparent; border: none; color: #999;
+    font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
   .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
-  .ps-tryon-section-label { font-size: 11px; font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: 4px 0 2px; }
-  .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: 10px; margin-top: 6px; }
-  .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius: 10px; padding: 10px 14px; color: #999; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .ps-tryon-section-label { font-size: clamp(8px, 0.57vw, 11px); font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: clamp(2px, 0.21vw, 4px) 0 clamp(1px, 0.1vw, 2px); }
+  .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: clamp(6px, 0.52vw, 10px); margin-top: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); color: #999; font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
   .ps-tryon-optional-toggle:hover { border-color: #555; color: #ccc; }
-  .ps-tryon-chevron { transition: transform 0.2s; font-size: 14px; }
-  .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
-  .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
-  .ps-tryon-shoe-title { font-size: 13px; font-weight: 600; color: #999; }
-  .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
-  .ps-tryon-form-save-toggle { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+  .ps-tryon-chevron { transition: transform 0.2s; font-size: clamp(10px, 0.73vw, 14px); }
+  .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); padding-top: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: clamp(8px, 0.73vw, 14px); margin-top: clamp(4px, 0.31vw, 6px); display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-shoe-title { font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; color: #999; }
+  .ps-tryon-disclaimer { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin: clamp(2px, 0.21vw, 4px) 0 0; }
+  .ps-tryon-form-save-toggle { margin-top: clamp(6px, 0.52vw, 10px); display: flex; flex-direction: column; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-form-save-check {
-    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer; user-select: none;
+    display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.68vw, 13px); color: #ccc; cursor: pointer; user-select: none;
   }
   .ps-tryon-form-save-check input[type="checkbox"] {
-    width: 16px; height: 16px; accent-color: #bb945c; cursor: pointer;
+    width: clamp(12px, 0.83vw, 16px); height: clamp(12px, 0.83vw, 16px); accent-color: #bb945c; cursor: pointer;
   }
   .ps-tryon-form-save-name {
-    padding: 8px 12px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    padding: clamp(5px, 0.42vw, 8px) clamp(7px, 0.63vw, 12px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit; outline: none;
     transition: border-color 0.2s;
   }
   .ps-tryon-form-save-name:focus { border-color: #bb945c; }
 
   /* Processing */
-  .ps-tryon-processing { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-processing { text-align: center; padding: clamp(14px, 1.25vw, 24px); display: flex; flex-direction: column; align-items: center; }
 
   .ps-tryon-processing-image-wrap {
-    position: relative; width: 220px; height: 280px; margin: 0 auto 24px;
-    border-radius: 16px; overflow: hidden; border: 2px solid #333;
+    position: relative; width: clamp(160px, 11.5vw, 220px); height: clamp(200px, 14.6vw, 280px); margin: 0 auto clamp(14px, 1.25vw, 24px);
+    border-radius: clamp(10px, 0.83vw, 16px); overflow: hidden; border: 2px solid #333;
   }
   .ps-tryon-processing-blur {
-    position: absolute; inset: -20px; background-size: cover; background-position: center;
+    position: absolute; inset: clamp(-14px, -1.04vw, -20px); background-size: cover; background-position: center;
     filter: blur(25px) brightness(0.5); transform: scale(1.2);
   }
   .ps-tryon-processing-model {
@@ -1607,7 +1610,7 @@ const STYLES = `
   .ps-tryon-scan-line {
     position: absolute; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
-    box-shadow: 0 0 15px rgba(187,148,92,0.6), 0 0 40px rgba(187,148,92,0.2);
+    box-shadow: 0 0 clamp(10px, 0.78vw, 15px) rgba(187,148,92,0.6), 0 0 clamp(24px, 2.08vw, 40px) rgba(187,148,92,0.2);
     animation: ps-scan 2.5s ease-in-out infinite;
     pointer-events: none; z-index: 2;
   }
@@ -1619,35 +1622,35 @@ const STYLES = `
   }
 
   .ps-tryon-progress-section {
-    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 300px; margin-bottom: 16px;
+    display: flex; align-items: center; gap: clamp(7px, 0.63vw, 12px); width: 100%; max-width: clamp(200px, 15.6vw, 300px); margin-bottom: clamp(10px, 0.83vw, 16px);
   }
   .ps-tryon-progress-bar-wrap {
-    flex: 1; height: 6px; background: #333; border-radius: 3px; overflow: hidden;
+    flex: 1; height: clamp(4px, 0.31vw, 6px); background: #333; border-radius: 3px; overflow: hidden;
   }
   .ps-tryon-progress-bar-fill {
     height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
     border-radius: 3px; transition: width 0.3s ease; width: 0%;
   }
   .ps-tryon-progress-pct {
-    font-size: 13px; font-weight: 700; color: #bb945c; min-width: 36px; text-align: right;
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 700; color: #bb945c; min-width: clamp(24px, 1.88vw, 36px); text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
-  .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
-  .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
+  .ps-tryon-processing-text { font-size: clamp(10px, 0.73vw, 14px); color: #fff; margin: 0 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-processing-sub { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
 
   /* Result */
   .ps-tryon-result-layout { text-align: center; }
-  .ps-tryon-result-split { display: flex; gap: 24px; text-align: left; align-items: stretch; }
+  .ps-tryon-result-split { display: flex; gap: clamp(14px, 1.25vw, 24px); text-align: left; align-items: stretch; }
   .ps-tryon-result-image-col { flex: 0 0 45%; min-width: 0; display: flex; align-items: center; justify-content: center; }
-  .ps-tryon-result-image-col img { width: 100%; max-height: 400px; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
+  .ps-tryon-result-image-col img { width: 100%; max-height: clamp(280px, 20.8vw, 400px); object-fit: contain; border-radius: clamp(8px, 0.73vw, 14px); box-shadow: 0 clamp(5px, 0.42vw, 8px) clamp(20px, 1.67vw, 32px) rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
   .ps-tryon-result-info-col { flex: 1; min-width: 0; }
-  .ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
-  .ps-tryon-result-actions { display: flex; gap: 8px; margin-top: 16px; }
+  .ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: clamp(8px, 0.63vw, 12px); margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-result-actions { display: flex; gap: clamp(5px, 0.42vw, 8px); margin-top: clamp(10px, 0.83vw, 16px); }
   .ps-tryon-result-actions button {
-    flex: 1; padding: 12px; font-family: var(--ps-modal-font, system-ui, sans-serif);
-    font-size: 13px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; border: none;
+    flex: 1; padding: clamp(7px, 0.63vw, 12px); font-family: var(--ps-modal-font, system-ui, sans-serif);
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; border-radius: clamp(6px, 0.52vw, 10px); cursor: pointer; transition: all 0.2s; border: none;
   }
   .ps-tryon-btn-download { background: #bb945c; color: #111; }
   .ps-tryon-btn-download:hover { opacity: 0.9; }
@@ -1655,153 +1658,153 @@ const STYLES = `
   .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
 
   /* Size recommendation */
-  .ps-tryon-size-recommend { margin-bottom: 16px; }
-  .ps-tryon-size-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 14px; }
+  .ps-tryon-size-recommend { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-size-title { font-size: clamp(13px, 0.94vw, 18px); font-weight: 700; color: #fff; margin: 0 0 clamp(8px, 0.73vw, 14px); }
   .ps-tryon-size-hero-row {
-    display: flex; align-items: center; gap: 16px; padding: 16px 20px;
-    border: 1.5px solid #333; border-radius: 14px; margin-bottom: 18px; background: rgba(255,255,255,0.02);
+    display: flex; align-items: center; gap: clamp(10px, 0.83vw, 16px); padding: clamp(10px, 0.83vw, 16px) clamp(12px, 1.04vw, 20px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.73vw, 14px); margin-bottom: clamp(10px, 0.94vw, 18px); background: rgba(255,255,255,0.02);
   }
   .ps-tryon-size-badge {
     display: inline-flex; align-items: center; justify-content: center;
-    min-width: 56px; height: 56px; padding: 0 12px; border-radius: 12px;
+    min-width: clamp(40px, 2.92vw, 56px); height: clamp(40px, 2.92vw, 56px); padding: 0 clamp(7px, 0.63vw, 12px); border-radius: clamp(8px, 0.63vw, 12px);
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
+    color: #111; font-size: clamp(16px, 1.25vw, 24px); font-weight: 800; letter-spacing: -0.02em;
   }
-  .ps-tryon-size-conf-label { font-size: 15px; font-weight: 600; }
+  .ps-tryon-size-conf-label { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
 
-  .ps-tryon-sizing-loading { text-align: center; padding: 20px 0; }
+  .ps-tryon-sizing-loading { text-align: center; padding: clamp(12px, 1.04vw, 20px) 0; }
   .ps-tryon-size-loading-spinner {
-    width: 36px; height: 36px; border: 3px solid #333;
+    width: clamp(24px, 1.88vw, 36px); height: clamp(24px, 1.88vw, 36px); border: 3px solid #333;
     border-top-color: #bb945c; border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto 12px;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto clamp(7px, 0.63vw, 12px);
   }
   @keyframes ps-spin { to { transform: rotate(360deg); } }
 
   /* Fit Summary */
-  .ps-tryon-fit-summary { margin-bottom: 16px; }
-  .ps-tryon-fit-summary-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 10px; }
-  .ps-tryon-fit-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
+  .ps-tryon-fit-summary { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-fit-summary-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; color: #fff; margin: 0 0 clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-fit-row { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); padding: clamp(5px, 0.42vw, 8px) 0; }
   .ps-tryon-fit-icon {
-    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-    font-size: 12px; font-weight: 700; flex-shrink: 0;
+    width: clamp(16px, 1.15vw, 22px); height: clamp(16px, 1.15vw, 22px); border-radius: 50%; display: flex; align-items: center; justify-content: center;
+    font-size: clamp(9px, 0.63vw, 12px); font-weight: 700; flex-shrink: 0;
   }
   .ps-fit-icon-good { background: rgba(74,222,128,0.15); color: #4ade80; }
   .ps-fit-icon-tight { background: rgba(245,158,11,0.15); color: #f59e0b; }
   .ps-fit-icon-loose { background: rgba(96,165,250,0.15); color: #60a5fa; }
-  .ps-tryon-fit-text { font-size: 14px; color: #ccc; line-height: 1.4; }
+  .ps-tryon-fit-text { font-size: clamp(10px, 0.73vw, 14px); color: #ccc; line-height: 1.4; }
   .ps-tryon-fit-text strong { color: #fff; font-weight: 600; }
   .ps-tryon-fit-details-toggle {
-    display: inline-block; margin-top: 8px; font-size: 13px; color: #bb945c; cursor: pointer;
+    display: inline-block; margin-top: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.68vw, 13px); color: #bb945c; cursor: pointer;
     font-weight: 600; background: none; border: none; padding: 0; font-family: inherit;
   }
   .ps-tryon-fit-details-toggle:hover { color: #d6ba7d; }
-  .ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
-  .ps-tryon-fit-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid #333; color: #999; font-weight: 600; }
-  .ps-tryon-fit-table td { padding: 8px 10px; border-bottom: 1px solid #222; color: #ccc; }
+  .ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top: clamp(6px, 0.52vw, 10px); font-size: clamp(10px, 0.68vw, 13px); }
+  .ps-tryon-fit-table th { text-align: left; padding: clamp(5px, 0.42vw, 8px) clamp(6px, 0.52vw, 10px); border-bottom: 1px solid #333; color: #999; font-weight: 600; }
+  .ps-tryon-fit-table td { padding: clamp(5px, 0.42vw, 8px) clamp(6px, 0.52vw, 10px); border-bottom: 1px solid #222; color: #ccc; }
   .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
 
   /* Equivalent Sizes */
-  .ps-tryon-equiv-section { margin-bottom: 16px; }
-  .ps-tryon-equiv-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 10px; }
-  .ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+  .ps-tryon-equiv-section { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-equiv-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; color: #fff; margin: 0 0 clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-equiv-chip {
-    display: flex; align-items: center; border: 1.5px solid #333; border-radius: 10px; overflow: hidden;
+    display: flex; align-items: center; border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); overflow: hidden;
   }
-  .ps-tryon-equiv-region { padding: 7px 10px; font-size: 12px; color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
-  .ps-tryon-equiv-value { padding: 7px 12px; font-size: 14px; color: #fff; font-weight: 700; }
+  .ps-tryon-equiv-region { padding: clamp(4px, 0.36vw, 7px) clamp(6px, 0.52vw, 10px); font-size: clamp(9px, 0.63vw, 12px); color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
+  .ps-tryon-equiv-value { padding: clamp(4px, 0.36vw, 7px) clamp(7px, 0.63vw, 12px); font-size: clamp(10px, 0.73vw, 14px); color: #fff; font-weight: 700; }
 
-  .ps-tryon-size-reasoning { font-size: 14px; color: #ccc; line-height: 1.6; margin-bottom: 14px; }
+  .ps-tryon-size-reasoning { font-size: clamp(10px, 0.73vw, 14px); color: #ccc; line-height: 1.6; margin-bottom: clamp(8px, 0.73vw, 14px); }
 
   /* Save profile prompt */
-  .ps-tryon-save-prompt { margin-top: 14px; padding: 14px; border: 1px solid #333; border-radius: 12px; background: #1a1b1a; }
-  .ps-tryon-save-label { font-size: 12px; color: #999; margin-bottom: 10px; }
-  .ps-tryon-save-row { display: flex; gap: 8px; }
+  .ps-tryon-save-prompt { margin-top: clamp(8px, 0.73vw, 14px); padding: clamp(8px, 0.73vw, 14px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); background: #1a1b1a; }
+  .ps-tryon-save-label { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin-bottom: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-save-row { display: flex; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-save-row input {
-    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #111211; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #111211; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit; outline: none;
   }
   .ps-tryon-save-row input:focus { border-color: #bb945c; }
   .ps-tryon-save-row button {
-    padding: 10px 20px; background: #bb945c; color: #111; border: none; border-radius: 10px;
-    font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
+    padding: clamp(6px, 0.52vw, 10px) clamp(12px, 1.04vw, 20px); background: #bb945c; color: #111; border: none; border-radius: clamp(6px, 0.52vw, 10px);
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
   }
   .ps-tryon-save-row button:hover { opacity: 0.9; }
-  .ps-tryon-save-btn-group { display: flex; gap: 6px; }
+  .ps-tryon-save-btn-group { display: flex; gap: clamp(4px, 0.31vw, 6px); }
   .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid #bb945c !important; color: #bb945c !important; }
   .ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
-  .ps-tryon-save-done { font-size: 12px; color: #4ade80; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
+  .ps-tryon-save-done { font-size: clamp(9px, 0.63vw, 12px); color: #4ade80; margin-top: clamp(6px, 0.52vw, 10px); display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); justify-content: center; }
   .ps-tryon-save-done svg { stroke: currentColor; }
 
   /* Error */
-  .ps-tryon-error { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
-  .ps-tryon-error svg { color: #ef4444; margin-bottom: 12px; }
-  .ps-tryon-error-text { font-size: 14px; color: #ef4444; margin: 0 0 16px; }
+  .ps-tryon-error { text-align: center; padding: clamp(14px, 1.25vw, 24px); display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-error svg { color: #ef4444; margin-bottom: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-error-text { font-size: clamp(10px, 0.73vw, 14px); color: #ef4444; margin: 0 0 clamp(10px, 0.83vw, 16px); }
 
   /* Footer */
-  .ps-tryon-powered { text-align: center; padding: 12px 24px 16px; font-size: 11px; color: #666; }
+  .ps-tryon-powered { text-align: center; padding: clamp(7px, 0.63vw, 12px) clamp(14px, 1.25vw, 24px) clamp(10px, 0.83vw, 16px); font-size: clamp(8px, 0.57vw, 11px); color: #666; }
   .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
   .ps-tryon-powered a:hover { text-decoration: underline; }
 
   /* Drawer */
   .ps-tryon-drawer {
     position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
-    overflow-y: auto; scrollbar-width: thin; padding: 20px 24px;
+    overflow-y: auto; scrollbar-width: thin; padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px);
     transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
   }
   .ps-tryon-drawer-open { transform: translateX(0); }
-  .ps-tryon-drawer-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #333; }
+  .ps-tryon-drawer-header { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); padding-bottom: clamp(8px, 0.73vw, 14px); margin-bottom: clamp(8px, 0.73vw, 14px); border-bottom: 1px solid #333; }
   .ps-tryon-drawer-back {
-    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    width: clamp(22px, 1.67vw, 32px); height: clamp(22px, 1.67vw, 32px); display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: #999; transition: all 0.2s; flex-shrink: 0;
   }
   .ps-tryon-drawer-back:hover { border-color: #bb945c; color: #bb945c; }
-  .ps-tryon-drawer-title { font-size: 16px; font-weight: 600; color: #fff; }
-  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 10px; }
-  .ps-tryon-drawer-empty { text-align: center; padding: 32px 16px; color: #666; font-size: 14px; }
+  .ps-tryon-drawer-title { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; }
+  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-drawer-empty { text-align: center; padding: clamp(20px, 1.67vw, 32px) clamp(10px, 0.83vw, 16px); color: #666; font-size: clamp(10px, 0.73vw, 14px); }
 
   /* Profile items */
   .ps-tryon-profile-item {
-    display: flex; align-items: center; gap: 12px; padding: 14px;
-    border: 1px solid #333; border-radius: 12px; cursor: pointer; transition: all 0.2s;
+    display: flex; align-items: center; gap: clamp(7px, 0.63vw, 12px); padding: clamp(8px, 0.73vw, 14px);
+    border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); cursor: pointer; transition: all 0.2s;
   }
   .ps-tryon-profile-item:hover { border-color: #bb945c; }
   .ps-tryon-profile-avatar {
-    width: 40px; height: 40px; border-radius: 50%;
+    width: clamp(28px, 2.08vw, 40px); height: clamp(28px, 2.08vw, 40px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: rgba(187,148,92,0.1); flex-shrink: 0;
   }
   .ps-tryon-profile-avatar svg { stroke: #bb945c; fill: none; }
   .ps-tryon-profile-info { flex: 1; min-width: 0; }
-  .ps-tryon-profile-name { font-size: 14px; font-weight: 600; color: #fff; }
-  .ps-tryon-profile-detail { font-size: 11px; color: #999; margin-top: 2px; }
+  .ps-tryon-profile-name { font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; color: #fff; }
+  .ps-tryon-profile-detail { font-size: clamp(8px, 0.57vw, 11px); color: #999; margin-top: 2px; }
   .ps-tryon-profile-item > svg:last-child { color: #666; flex-shrink: 0; transition: color 0.2s; }
   .ps-tryon-profile-item:hover > svg:last-child { color: #bb945c; }
 
   /* History items */
   .ps-tryon-history-item {
-    display: flex; gap: 14px; padding: 14px;
-    border: 1px solid #333; border-radius: 12px; align-items: flex-start; transition: all 0.2s;
+    display: flex; gap: clamp(8px, 0.73vw, 14px); padding: clamp(8px, 0.73vw, 14px);
+    border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); align-items: flex-start; transition: all 0.2s;
   }
-  .ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 4px 12px rgba(187,148,92,0.06); }
-  .ps-tryon-history-images { display: flex; gap: 8px; flex-shrink: 0; }
-  .ps-tryon-history-thumb { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
+  .ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(7px, 0.63vw, 12px) rgba(187,148,92,0.06); }
+  .ps-tryon-history-images { display: flex; gap: clamp(5px, 0.42vw, 8px); flex-shrink: 0; }
+  .ps-tryon-history-thumb { width: clamp(44px, 3.33vw, 64px); height: clamp(56px, 4.17vw, 80px); border-radius: clamp(6px, 0.52vw, 10px); object-fit: cover; flex-shrink: 0; }
   .ps-tryon-history-info { flex: 1; min-width: 0; }
-  .ps-tryon-history-product { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
-  .ps-tryon-history-meta { font-size: 11px; color: #666; margin-top: 3px; }
-  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
-  .ps-tryon-history-sizing-reason { font-size: 11px; color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .ps-tryon-history-product { font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .ps-tryon-history-meta { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin-top: 3px; }
+  .ps-tryon-history-sizing { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); margin-top: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-history-sizing-reason { font-size: clamp(8px, 0.57vw, 11px); color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   .ps-tryon-history-size-badge {
-    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
+    flex-shrink: 0; width: clamp(28px, 2.08vw, 40px); height: clamp(28px, 2.08vw, 40px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 13px; font-weight: 700;
+    color: #111; font-size: clamp(10px, 0.68vw, 13px); font-weight: 700;
   }
-  .ps-tryon-history-result-img { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
+  .ps-tryon-history-result-img { width: clamp(44px, 3.33vw, 64px); height: clamp(56px, 4.17vw, 80px); border-radius: clamp(6px, 0.52vw, 10px); object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
   .ps-tryon-history-delete {
-    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
-    border: none; background: transparent; cursor: pointer; color: #666; border-radius: 6px; transition: all 0.2s; flex-shrink: 0;
+    width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); display: flex; align-items: center; justify-content: center;
+    border: none; background: transparent; cursor: pointer; color: #666; border-radius: clamp(4px, 0.31vw, 6px); transition: all 0.2s; flex-shrink: 0;
   }
   .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
   .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }
@@ -1810,33 +1813,33 @@ const STYLES = `
   .ps-tryon-detail-overlay {
     position: fixed; inset: 0; background: rgba(0,0,0,0.55);
     display: flex; align-items: center; justify-content: center;
-    z-index: 9999999; padding: 16px; animation: ps-fade-in 0.2s ease;
+    z-index: 9999999; padding: clamp(10px, 0.83vw, 16px); animation: ps-fade-in 0.2s ease;
   }
   .ps-tryon-detail-modal {
-    background: #111211; border-radius: 16px; width: 100%; max-width: 440px; max-height: 85vh;
-    overflow-y: auto; box-shadow: 0 32px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
+    background: #111211; border-radius: clamp(10px, 0.83vw, 16px); width: 100%; max-width: clamp(340px, 23vw, 440px); max-height: 85vh;
+    overflow-y: auto; box-shadow: 0 clamp(20px, 1.67vw, 32px) clamp(40px, 3.33vw, 64px) rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
     font-family: var(--ps-modal-font, system-ui, sans-serif); color: #fff;
   }
   .ps-tryon-detail-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 18px 24px; border-bottom: 1px solid #333;
+    padding: clamp(10px, 0.94vw, 18px) clamp(14px, 1.25vw, 24px); border-bottom: 1px solid #333;
   }
-  .ps-tryon-detail-header span { font-size: 15px; font-weight: 600; }
-  .ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: 6px; padding: 4px; transition: background 0.15s; }
+  .ps-tryon-detail-header span { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; }
+  .ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: clamp(4px, 0.31vw, 6px); padding: clamp(2px, 0.21vw, 4px); transition: background 0.15s; }
   .ps-tryon-detail-header button:hover { background: rgba(255,255,255,0.1); }
-  .ps-tryon-detail-body { padding: 20px 24px; }
-  .ps-tryon-detail-gender { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid #333; margin-bottom: 14px; }
+  .ps-tryon-detail-body { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px); }
+  .ps-tryon-detail-gender { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; padding-bottom: clamp(8px, 0.73vw, 14px); border-bottom: 1px solid #333; margin-bottom: clamp(8px, 0.73vw, 14px); }
   .ps-tryon-detail-gender svg { stroke: #bb945c; fill: none; }
-  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
-  .ps-tryon-detail-cell { background: #1a1b1a; border-radius: 10px; padding: 12px 14px; }
-  .ps-tryon-detail-cell-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
-  .ps-tryon-detail-cell-value { font-size: 16px; font-weight: 600; color: #fff; }
-  .ps-tryon-detail-date { font-size: 11px; color: #666; text-align: center; margin-top: 8px; }
+  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.52vw, 10px); margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-detail-cell { background: #1a1b1a; border-radius: clamp(6px, 0.52vw, 10px); padding: clamp(7px, 0.63vw, 12px) clamp(8px, 0.73vw, 14px); }
+  .ps-tryon-detail-cell-label { font-size: clamp(8px, 0.57vw, 11px); color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-detail-cell-value { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; }
+  .ps-tryon-detail-date { font-size: clamp(8px, 0.57vw, 11px); color: #666; text-align: center; margin-top: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-detail-delete {
-    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
-    padding: 12px; border: 1px solid #333; border-radius: 10px; background: none;
-    color: #ef4444; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
-    font-family: inherit; margin-top: 16px;
+    width: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.31vw, 6px);
+    padding: clamp(7px, 0.63vw, 12px); border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: none;
+    color: #ef4444; font-size: clamp(10px, 0.68vw, 13px); font-weight: 500; cursor: pointer; transition: all 0.2s;
+    font-family: inherit; margin-top: clamp(10px, 0.83vw, 16px);
   }
   .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; }
   .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",