@primestyleai/tryon 5.5.13 → 5.5.15

package/dist/react/index.js

@@ -3203,6 +3203,162 @@ const STYLES = `
      baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. */
   .ps-bpm-bottom .ps-pm-primary-btn { margin: 14px 16px 0; }
 
+  /* ════════════════════════════════════════════════════════════════
+     MobileScanningView (.ps-msc-*) — AI scan processing screen.
+     Dark photo viewfinder with corner brackets, scanning line, pose
+     skeleton overlay, cycling stage text below with slide-fade.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-msc-root {
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 4px 0;
+    flex: 1; min-height: 0;
+  }
+
+  /* The dark viewfinder containing the photo + overlays */
+  .ps-msc-viewfinder {
+    position: relative; flex-shrink: 0;
+    background: #0E0F11; border-radius: 12px; overflow: hidden;
+    height: 64vh; max-height: 540px; min-height: 360px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-msc-photo {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain; display: block;
+    filter: brightness(0.9) contrast(1.05);
+  }
+
+  /* Live feed badge top-left */
+  .ps-msc-feed-badge {
+    position: absolute; top: 12px; left: 14px; z-index: 4;
+    display: flex; align-items: center; gap: 6px;
+    color: rgba(255,255,255,0.85);
+    font-size: 10px; font-weight: 600;
+    letter-spacing: 0.12em;
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+  .ps-msc-feed-dot {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: #ef4444;
+    box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
+    animation: ps-msc-rec 1.4s ease-in-out infinite;
+  }
+  @keyframes ps-msc-rec {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
+    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(239,68,68,0); }
+  }
+
+  /* Corner brackets — four absolutely positioned L-shapes */
+  .ps-msc-corners {
+    position: absolute; inset: 28px;
+    pointer-events: none; z-index: 3;
+  }
+  .ps-msc-corner {
+    position: absolute;
+    width: 22px; height: 22px;
+    border: 1.5px solid rgba(255,255,255,0.7);
+  }
+  .ps-msc-corner.ps-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
+  .ps-msc-corner.ps-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
+  .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
+  .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }
+
+  /* Scanning line that sweeps top-to-bottom */
+  .ps-msc-scanline {
+    position: absolute; left: 28px; right: 28px;
+    height: 1.5px; z-index: 3;
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(180,220,255,0.85),
+      rgba(180,220,255,0.85),
+      transparent
+    );
+    box-shadow: 0 0 8px rgba(180,220,255,0.5);
+    animation: ps-msc-scan 2.6s ease-in-out infinite;
+  }
+  @keyframes ps-msc-scan {
+    0%   { top: 28px; opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 1; }
+    100% { top: calc(100% - 28px); opacity: 0; }
+  }
+
+  /* Pose skeleton overlay — sits over the photo */
+  .ps-msc-pose-wrap {
+    position: absolute; inset: 0; z-index: 2;
+    display: flex; align-items: center; justify-content: center;
+    pointer-events: none;
+  }
+  .ps-msc-pose-overlay {
+    width: 100%; height: 100%;
+  }
+  @keyframes ps-msc-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  /* Bottom of viewfinder: stage label + progress bar + sub */
+  .ps-msc-vf-bottom {
+    position: absolute; left: 28px; right: 28px; bottom: 28px;
+    z-index: 4; text-align: center;
+    color: #FFFFFF;
+  }
+  .ps-msc-vf-text {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.16em;
+    color: rgba(255,255,255,0.9);
+    margin-bottom: 6px;
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+  .ps-msc-vf-bar {
+    height: 2px; width: 100%;
+    background: rgba(255,255,255,0.18);
+    border-radius: 2px; overflow: hidden;
+  }
+  .ps-msc-vf-bar-fill {
+    height: 100%; width: 30%;
+    background: linear-gradient(to right, rgba(180,220,255,0.6), rgba(255,255,255,0.95));
+    border-radius: 2px;
+    animation: ps-msc-bar 2.2s ease-in-out infinite;
+  }
+  @keyframes ps-msc-bar {
+    0%   { transform: translateX(-100%); }
+    50%  { transform: translateX(150%); }
+    100% { transform: translateX(350%); }
+  }
+  .ps-msc-vf-sub {
+    margin-top: 8px;
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.18em;
+    color: rgba(255,255,255,0.55);
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+
+  /* Cycling stage text below the viewfinder — slides + fades on change */
+  .ps-msc-stage {
+    text-align: center; padding: 4px 12px;
+    min-height: 64px;
+    overflow: hidden;
+  }
+  .ps-msc-stage-slot {
+    animation: ps-msc-stage-in 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  @keyframes ps-msc-stage-in {
+    from { opacity: 0; transform: translateY(14px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .ps-msc-stage-title {
+    font-size: 16px; font-weight: 700;
+    letter-spacing: 0.06em;
+    color: var(--ps-text-primary);
+    margin-bottom: 6px;
+  }
+  .ps-msc-stage-desc {
+    font-size: 12px; color: var(--ps-text-muted);
+    line-height: 1.5; max-width: 300px; margin: 0 auto;
+  }
+
   /* Bottom action area — Next button + tab bar grouped together,
      pushed to the bottom of the modal body by .ps-bpm-spacer above. */
   .ps-bpm-bottom {
@@ -4187,6 +4343,216 @@ function EstimationReviewView({
     ] })
   ] });
 }
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return isMobile;
+}
+function RulerIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
+        onClick: onSwitchToManual,
+        children: [
+          /* @__PURE__ */ jsx(RulerIcon, {}),
+          t("MANUAL FIT")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
+        onClick: onSwitchToScan,
+        children: [
+          /* @__PURE__ */ jsx(ScanIcon, {}),
+          t("AI SCAN")
+        ]
+      }
+    )
+  ] });
+}
+const SKELETON_CONNECTIONS$1 = [
+  ["leftShoulder", "rightShoulder"],
+  ["leftShoulder", "leftElbow"],
+  ["leftElbow", "leftWrist"],
+  ["rightShoulder", "rightElbow"],
+  ["rightElbow", "rightWrist"],
+  ["leftShoulder", "leftHip"],
+  ["rightShoulder", "rightHip"],
+  ["leftHip", "rightHip"],
+  ["leftHip", "leftKnee"],
+  ["leftKnee", "leftAnkle"],
+  ["rightHip", "rightKnee"],
+  ["rightKnee", "rightAnkle"]
+];
+function MobileSkeleton({ landmarks, w, h }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ps-msc-pose-overlay",
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        SKELETON_CONNECTIONS$1.map(([a, b], i) => {
+          const pa = landmarks[a];
+          const pb = landmarks[b];
+          if (!pa || !pb) return null;
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: pa.x * w,
+              y1: pa.y * h,
+              x2: pb.x * w,
+              y2: pb.y * h,
+              stroke: "rgba(255,255,255,0.85)",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.4s ease ${i * 0.05}s forwards` }
+            },
+            `l-${i}`
+          );
+        }),
+        Object.entries(landmarks).map(([key, v], i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: v.x * w,
+              cy: v.y * h,
+              r: 9,
+              fill: "rgba(255,255,255,0.18)",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: v.x * w,
+              cy: v.y * h,
+              r: 5,
+              fill: "#FFFFFF",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
+            }
+          )
+        ] }, key))
+      ]
+    }
+  );
+}
+function MobileScanningView({
+  previewUrl,
+  bodyLandmarks,
+  sizingDone,
+  onSwitchToManual,
+  t
+}) {
+  const stages = [
+    { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo."), viewfinderText: t("DETECTING POSE") },
+    { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t("SCANNING FRAME") },
+    { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips."), viewfinderText: t("ANALYZING") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide."), viewfinderText: t("MATCHING SIZE") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
+  ];
+  const [dims, setDims] = useState({ w: 800, h: 1200 });
+  const handleImgLoad = (e) => {
+    const img = e.currentTarget;
+    setDims({ w: img.naturalWidth || img.offsetWidth, h: img.naturalHeight || img.offsetHeight });
+  };
+  const [stageIdx, setStageIdx] = useState(0);
+  useEffect(() => {
+    if (sizingDone) return;
+    if (bodyLandmarks && stageIdx === 0) {
+      setStageIdx(1);
+      return;
+    }
+    const id = setInterval(() => {
+      setStageIdx((i) => Math.min(i + 1, stages.length - 1));
+    }, 1600);
+    return () => clearInterval(id);
+  }, [bodyLandmarks, sizingDone, stageIdx, stages.length]);
+  const current = stages[stageIdx] ?? stages[0];
+  const [feedTick, setFeedTick] = useState(1);
+  useEffect(() => {
+    if (sizingDone) return;
+    const id = setInterval(() => setFeedTick((n) => n + 1), 850);
+    return () => clearInterval(id);
+  }, [sizingDone]);
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msc-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-msc-viewfinder", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-feed-badge", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-feed-dot" }),
+        "LIVE_FEED:",
+        String(feedTick).padStart(2, "0")
+      ] }),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: t("Your photo"),
+          className: "ps-msc-photo",
+          onLoad: handleImgLoad
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-corners", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tl" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tr" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-bl" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-br" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-scanline" }),
+      bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-bottom", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-text", children: [
+          current.viewfinderText,
+          "..."
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar", children: /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar-fill" }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-sub", children: t("PLEASE STAND STILL") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, stageIdx) }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsx(
+      MobileBottomTabs,
+      {
+        mode: "scan",
+        onSwitchToManual,
+        onSwitchToScan: () => {
+        },
+        t
+      }
+    ) })
+  ] });
+}
 const SKELETON_CONNECTIONS = [
   ["nose", "leftShoulder"],
   ["nose", "rightShoulder"],
@@ -4903,6 +5269,7 @@ function SizeResultView({
   const sizingDone = !!sizingResult;
   const tryOnDone = !!resultImageUrl && !tryOnProcessing;
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
+  const isMobile = useIsMobile();
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
     isSnapProcessing,
@@ -4924,7 +5291,17 @@ function SizeResultView({
         /* @__PURE__ */ jsx("p", { style: { color: "var(--ps-text-muted)", fontSize: "0.8vw" }, children: t("Generating your size recommendation...") })
       ] })
     ] }),
-    isSnapProcessing && !allDone && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
+    isMobile && isSnapProcessing && !allDone && previewUrl && /* @__PURE__ */ jsx(
+      MobileScanningView,
+      {
+        previewUrl,
+        bodyLandmarks: bodyLandmarks ?? null,
+        sizingDone,
+        onSwitchToManual: () => setView("body-profile"),
+        t
+      }
+    ),
+    !isMobile && isSnapProcessing && !allDone && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-img-col", style: { position: "relative" }, children: [
         /* @__PURE__ */ jsx(
           "img",
@@ -5517,58 +5894,6 @@ function ResultView({ setView }) {
   }, []);
   return null;
 }
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, []);
-  return isMobile;
-}
-function RulerIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
-  ] });
-}
-function ScanIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
-function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t }) {
-  return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
-        onClick: onSwitchToManual,
-        children: [
-          /* @__PURE__ */ jsx(RulerIcon, {}),
-          t("MANUAL FIT")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
-        onClick: onSwitchToScan,
-        children: [
-          /* @__PURE__ */ jsx(ScanIcon, {}),
-          t("AI SCAN")
-        ]
-      }
-    )
-  ] });
-}
 function CameraSmallIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),

package/dist/react/styles.d.ts

@@ -1 +1 @@
-export declare const STYLES = "\n  /* Variable defaults must live on BOTH the root (for the trigger button)\n     and the overlay (which is React-portaled to <body> and therefore not\n     a descendant of .ps-tryon-root, so the cascade is broken). Without\n     this duplication the slider track gradient and the thumb border \u2014\n     both var(--ps-accent) \u2014 render as unset and become invisible. */\n  .ps-tryon-root,\n  .ps-tryon-overlay {\n    --ps-accent: #3B82F6;\n    --ps-accent-hover: #2563EB;\n    --ps-accent-light: #BFDBFE;\n    --ps-text-primary: #1C1D1E;\n    --ps-text-secondary: #454545;\n    --ps-text-muted: #84898C;\n    --ps-text-dim: #696E71;\n    --ps-border-color: #E7E7E7;\n    --ps-border-subtle: #F0F0F0;\n    --ps-bg-primary: #FFFFFF;\n    --ps-bg-secondary: #F8FAFF;\n    --ps-bg-tertiary: #F0F0F0;\n    --ps-input-bg: #FFFFFF;\n    --ps-input-border: #E7E7E7;\n    --ps-input-focus-border: var(--ps-accent);\n    --ps-error-color: #E7000B;\n    --ps-success-color: #1C9D4C;\n    --ps-warning-color: #DF8400;\n    --ps-logo-height: 2.8vw;\n  }\n  .ps-tryon-root { display: inline-block; visibility: visible !important; }\n\n  .ps-tryon-btn {\n    display: inline-flex; align-items: center; gap: clamp(6px, 0.42vw, 8px);\n    padding: var(--ps-btn-padding, clamp(10px, 0.63vw, 14px) clamp(16px, 1.25vw, 24px));\n    background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);\n    font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);\n    font-size: var(--ps-btn-font-size, clamp(13px, 0.73vw, 15px)); font-weight: var(--ps-btn-font-weight, 600);\n    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, clamp(6px, 0.42vw, 8px));\n    cursor: pointer; transition: all 0.2s ease;\n    width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);\n    box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;\n    box-sizing: border-box;\n  }\n  .ps-tryon-btn svg { width: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); height: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); flex-shrink: 0; }\n  .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, var(--ps-accent-hover)); transform: translateY(-1px); }\n  .ps-tryon-btn:active { transform: translateY(0); }\n\n  .ps-tryon-overlay {\n    position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));\n    display: flex; align-items: center; justify-content: center;\n    z-index: 2147483647;\n    isolation: isolate;\n    contain: layout style;\n    padding: 0.83vw;\n    padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));\n    animation: ps-fade-in 0.2s ease;\n    overflow-y: auto; -webkit-overflow-scrolling: touch;\n    font-family: system-ui, -apple-system, sans-serif;\n    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;\n    box-sizing: border-box;\n  }\n  .ps-tryon-overlay, .ps-tryon-overlay *, .ps-tryon-overlay *::before, .ps-tryon-overlay *::after { box-sizing: border-box; }\n  @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n\n  .ps-tryon-modal {\n    background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);\n    border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);\n    max-width: var(--ps-modal-max-width, 36vw); max-height: 92vh; overflow-y: auto;\n    font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);\n    box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.08); animation: ps-slide-up 0.3s ease;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n    flex-shrink: 0;\n  }\n  .ps-tryon-modal-wide { max-width: 55vw; width: 55vw; height: 70vh; max-height: 70vh; display: flex; flex-direction: column; overflow: visible; }\n  .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }\n  @keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }\n\n  /* Header */\n  .ps-tryon-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.7vw 1.25vw; background: var(--ps-modal-header-bg, rgba(255,255,255,0.95));\n    border-bottom: 1px solid var(--ps-border-color);\n    border-radius: var(--ps-modal-radius, 0.83vw) var(--ps-modal-radius, 0.83vw) 0 0;\n    backdrop-filter: blur(12px);\n  }\n  .ps-tryon-header-minimal {\n    justify-content: flex-end; gap: 0.4vw; padding: 0.4vw 0.8vw;\n  }\n  .ps-tryon-back-btn {\n    display: flex; align-items: center; gap: 0.35vw;\n    background: none; border: none; color: var(--ps-text-secondary); cursor: pointer;\n    font-size: 0.73vw; padding: 0; margin-bottom: 0.63vw;\n    transition: color 0.2s;\n  }\n  .ps-tryon-back-btn:hover { color: var(--ps-text-primary); }\n  .ps-tryon-back-btn svg { width: 1vw; height: 0.63vw; stroke: currentColor; flex-shrink: 0; }\n  .ps-tryon-title { display: flex; align-items: center; }\n  .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }\n  .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }\n  .ps-tryon-header-icon {\n    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n    cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;\n  }\n  .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: 0.9vw; height: 0.9vw; }\n  .ps-tryon-close {\n    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n    background: none; border: none; color: var(--ps-modal-close-color, #999);\n    cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;\n  }\n  .ps-tryon-close:hover { background: rgba(0,0,0,0.06); }\n  .ps-tryon-close svg { width: 1vw; height: 1vw; }\n\n  /* Language switcher */\n  .ps-tryon-lang-wrap { position: relative; z-index: 99999; }\n  .ps-tryon-lang-trigger {\n    display: flex; align-items: center; gap: clamp(5px, 0.36vw, 6px);\n    padding: clamp(6px, 0.36vw, 8px) clamp(10px, 0.73vw, 12px);\n    border: 1.5px solid var(--ps-border-color); border-radius: clamp(8px, 0.57vw, 10px);\n    background: transparent; cursor: pointer; color: var(--ps-text-secondary);\n    transition: all 0.25s ease; font-family: inherit; white-space: nowrap;\n    min-height: 36px;\n  }\n  .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n    border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);\n  }\n  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: clamp(13px, 0.8vw, 14px); height: clamp(13px, 0.8vw, 14px); }\n  .ps-tryon-lang-current {\n    font-size: clamp(12px, 0.68vw, 13px); font-weight: 500; letter-spacing: 0.01em;\n  }\n  .ps-tryon-lang-arrow {\n    font-size: clamp(10px, 0.57vw, 11px); transition: transform 0.25s ease; display: inline-block;\n  }\n  .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }\n\n  /* Dropdown is portaled to document.body \u2014 uses hardcoded colors (no CSS vars available) */\n  .ps-tryon-lang-dropdown {\n    min-width: 13vw;\n    background: #FFFFFF; border: 1.5px solid rgba(0,0,0,0.1);\n    border-radius: 0.73vw;\n    box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.15),\n                0 0 0 1px rgba(0,0,0,0.03);\n    overflow: hidden;\n    animation: ps-lang-open 0.2s ease both;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  @keyframes ps-lang-open {\n    from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }\n    to { opacity: 1; transform: none; }\n  }\n\n  .ps-tryon-lang-list {\n    max-height: 18vw; overflow-y: auto; padding: 0.31vw;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;\n  }\n  .ps-tryon-lang-item {\n    display: flex; align-items: center; gap: 0.57vw;\n    width: 100%; padding: 0.57vw 0.83vw;\n    border: none; background: transparent; color: #555; cursor: pointer;\n    border-radius: 0.47vw; transition: all 0.15s ease;\n    font-family: inherit; text-align: left;\n  }\n  .ps-tryon-lang-item:hover { background: rgba(0,0,0,0.04); color: #1C1D1E; }\n  .ps-tryon-lang-item.ps-selected { background: rgba(59,130,246,0.1); color: #3B82F6; }\n  .ps-tryon-lang-name {\n    flex: 1; font-size: 0.73vw; font-weight: 500;\n  }\n  .ps-tryon-lang-code {\n    font-size: 0.52vw; color: #999; font-weight: 600;\n    letter-spacing: 0.05em; font-family: ui-monospace, monospace;\n  }\n  .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #3B82F6; opacity: 0.7; }\n  .ps-tryon-lang-check { color: #3B82F6; display: flex; align-items: center; }\n\n  /* Stepper */\n  /* Dots progress */\n  .ps-tryon-dots { display: none; }\n  .ps-tryon-dot { display: none; }\n\n  /* Body */\n  .ps-tryon-body { padding: 1.25vw; flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }\n  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(0.63vw); } to { opacity: 1; transform: translateY(0); } }\n  .ps-tryon-view-enter { animation: ps-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; flex: 1; display: flex; flex-direction: column; min-height: 0; will-change: transform, opacity; }\n\n  /* Welcome */\n  .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }\n  .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }\n  .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }\n  .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }\n  .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; background: var(--ps-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }\n  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.9vw; height: 0.9vw; }\n  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n  .ps-tryon-welcome-title { font-size: 1.4vw; font-weight: 700; color: var(--ps-text-primary); margin: 1vw 0 0.3vw; letter-spacing: -0.01em; }\n  .ps-tryon-welcome-sub { font-size: 0.9vw; color: var(--ps-text-secondary); margin: 0; }\n  .ps-tryon-features { display: flex; gap: 0.7vw; margin: 1.3vw 0; }\n  .ps-tryon-feature { flex: 1; padding: 1vw 0.7vw; border: 1px solid var(--ps-border-color); border-radius: 0.8vw; text-align: center; transition: border-color 0.2s; }\n  .ps-tryon-feature:hover { border-color: #555; }\n  .ps-tryon-feature-icon { margin-bottom: 0.4vw; color: var(--ps-accent); display: flex; justify-content: center; }\n  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: 1.2vw; height: 1.2vw; }\n  .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin-bottom: 2px; }\n  .ps-tryon-feature-desc { font-size: 0.7vw; color: var(--ps-text-secondary); }\n  .ps-tryon-cta {\n    width: 100%; padding: 1vw; background: var(--ps-accent); color: #fff; border: none;\n    border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;\n    display: flex; align-items: center; justify-content: center; gap: 0.5vw; transition: all 0.2s;\n    font-family: var(--ps-modal-font, system-ui, sans-serif);\n  }\n  .ps-tryon-cta:hover { background: var(--ps-accent-hover); transform: translateY(-1px); }\n  .ps-tryon-cta svg { stroke: #111; }\n  .ps-tryon-welcome-note { font-size: 0.7vw; color: var(--ps-text-muted); margin-top: 0.7vw; }\n\n  /* Upload */\n  .ps-tryon-upload {\n    border: 2px dashed var(--ps-upload-border, var(--ps-border-color)); border-radius: 0.63vw;\n    padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;\n    background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;\n  }\n  .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.05); }\n  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, var(--ps-accent)); margin-bottom: 0.63vw; }\n  .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, var(--ps-text-primary)); margin: 0 0 0.21vw; }\n  .ps-tryon-upload-hint { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n  .ps-tryon-preview {\n    position: relative; margin-bottom: 0.21vw;\n    height: 20vw; border-radius: 0.63vw;\n    overflow: hidden; background: var(--ps-bg-tertiary);\n  }\n  .ps-tryon-preview-blur {\n    position: absolute; inset: -20px; background-size: cover; background-position: center;\n    filter: blur(25px) brightness(0.4); transform: scale(1.2);\n  }\n  .ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }\n  .ps-tryon-preview-remove {\n    position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;\n    border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\n    font-size: 0.83vw; transition: background 0.15s;\n  }\n  .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }\n  .ps-tryon-submit {\n    width: 100%; padding: 0.73vw; margin-top: 0.83vw;\n    background: var(--ps-modal-primary-bg, var(--ps-accent)); color: var(--ps-modal-primary-color, #111);\n    font-family: var(--ps-modal-font, system-ui, sans-serif);\n    font-size: 0.73vw; font-weight: 600; border: none;\n    border-radius: var(--ps-modal-primary-radius, 0.52vw);\n    cursor: pointer; transition: all 0.2s;\n    display: flex; align-items: center; justify-content: center; gap: 0.42vw;\n  }\n  .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }\n  .ps-tryon-submit svg { stroke: currentColor; }\n\n  /* Profile bar */\n  .ps-tryon-profile-bar { margin-bottom: 0.83vw; }\n  .ps-tryon-profile-select {\n    width: 100%; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n    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\");\n    background-repeat: no-repeat; background-position: right 0.73vw center;\n  }\n  .ps-tryon-profile-select:focus { border-color: var(--ps-accent); }\n\n  /* Sizing \u2014 split layout (product image left, form right) */\n  .ps-tryon-sizing-split {\n    display: flex; gap: 1.8vw;\n    flex: 1; min-height: 0; position: relative;\n    height: 30vw;\n  }\n  .ps-tryon-sizing-img-col {\n    flex: 1.15; position: relative;\n    background: transparent;\n    border-radius: 0.8vw; overflow: hidden;\n  }\n  .ps-tryon-sizing-img-col > img, .ps-tryon-sizing-img-col > .ps-tryon-sizing-measure-img {\n    display: block; width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    background: transparent;\n    border-radius: 1vw;\n    transition: opacity 0.3s ease;\n  }\n  .ps-tryon-sizing-product-img { opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n  .ps-tryon-sizing-product-img.ps-tryon-img-hidden { opacity: 0.08; }\n  .ps-tryon-sizing-measure-img { position: absolute; inset: 0; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n  .ps-tryon-sizing-measure-img.ps-tryon-img-visible { opacity: 1; }\n  .ps-tryon-sizing-height-img { position: absolute; inset: 0; object-fit: contain !important; background: #f5f5f5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n  .ps-tryon-sizing-height-img.ps-tryon-img-visible { opacity: 1; }\n\n  /* Model overlay \u2014 positioned on top of the image column */\n  .ps-tryon-model-overlay {\n    grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity 0.5s ease;\n    width: 100%; aspect-ratio: 896 / 1200; overflow: hidden;\n  }\n  .ps-tryon-model-overlay.ps-tryon-img-visible { opacity: 1; }\n  .ps-tryon-model-raw { width: 100%; height: 100%; object-fit: contain; }\n\n  /* Measurement overlay group \u2014 each measurement is one group */\n  .ps-tryon-mline-group { position: absolute; inset: 0; pointer-events: none; }\n\n  /* Horizontal dashed line */\n  .ps-tryon-mline-h {\n    position: absolute; height: 0;\n    border-top: 2.5px dashed var(--ps-border-color);\n    animation: ps-dash-draw 0.5s ease 0.1s both;\n  }\n  /* Vertical dashed line (inseam, sleeve) */\n  .ps-tryon-mline-v {\n    position: absolute; width: 0;\n    border-left: 2.5px dashed var(--ps-border-color);\n    animation: ps-vdash-draw 0.5s ease 0.1s both;\n  }\n  /* Tick marks at line endpoints \u2014 vertical ticks for horizontal lines */\n  .ps-tryon-mline-tick {\n    position: absolute; width: 0;\n    border-left: 2.5px solid var(--ps-border-color);\n    animation: ps-label-pop 0.3s ease 0.2s both;\n  }\n  /* Horizontal ticks for vertical lines */\n  .ps-tryon-mline-htick {\n    position: absolute; height: 0;\n    border-top: 2.5px solid var(--ps-border-color);\n    animation: ps-label-pop 0.3s ease 0.2s both;\n  }\n\n  /* Label box \u2014 matches reference: black title box + left-bordered description */\n  .ps-tryon-mline-label {\n    position: absolute;\n    animation: ps-label-pop 0.35s ease 0.25s both;\n    max-width: 33%;\n  }\n  .ps-tryon-mline-title {\n    display: inline-block; background: #222; color: var(--ps-text-primary);\n    font-size: 0.55vw; font-weight: 800; letter-spacing: 0.06em;\n    padding: 0.12vw 0.35vw; margin-bottom: 0.2vw;\n  }\n  .ps-tryon-mline-desc {\n    font-size: 0.42vw; color: #444; line-height: 1.4;\n    font-style: italic;\n    border-left: 1.5px solid var(--ps-border-color); padding-left: 0.3vw;\n    margin-top: 0.1vw;\n  }\n\n  /* Per-field measurement guide overlay */\n  .ps-tryon-measure-overlay {\n    position: absolute; inset: 0; z-index: 5; pointer-events: none;\n    animation: ps-measure-in 0.3s ease both;\n  }\n  .ps-tryon-measure-dot {\n    position: absolute; width: 0.55vw; height: 0.55vw;\n    background: #222;\n    border: 2px solid var(--ps-border-color);\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);\n    animation: ps-dot-pulse 1.5s ease-in-out infinite;\n    z-index: 6;\n  }\n  .ps-tryon-measure-callout {\n    position: absolute; top: 3%; left: 4%; z-index: 7;\n    animation: ps-label-pop 0.35s ease 0.15s both;\n    max-width: 55%;\n  }\n  .ps-tryon-measure-title {\n    display: inline-block; background: #222; color: var(--ps-text-primary);\n    font-size: 1.1vw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;\n    padding: 0.3vw 0.65vw; margin-bottom: 0.35vw;\n  }\n  .ps-tryon-measure-desc {\n    font-size: 0.85vw; color: #222; line-height: 1.55;\n    font-style: italic; font-weight: 500;\n    border-left: 2.5px solid var(--ps-border-color); padding-left: 0.55vw;\n    margin-top: 0.15vw;\n  }\n  @keyframes ps-dot-pulse {\n    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }\n    50% { box-shadow: 0 0 0 5px rgba(0,0,0,0.06); }\n  }\n\n  @keyframes ps-measure-in {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ps-dash-draw {\n    from { clip-path: inset(0 100% 0 0); }\n    to { clip-path: inset(0 0 0 0); }\n  }\n  @keyframes ps-vdash-draw {\n    from { clip-path: inset(0 0 100% 0); }\n    to { clip-path: inset(0 0 0 0); }\n  }\n  @keyframes ps-label-pop {\n    from { opacity: 0; transform: scale(0.9); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 V2 Redesign \u2014 Editorial luxury \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-tryon-v2 {\n    display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n    height: 28vw; overflow: hidden;\n  }\n\n  /* Left image column \u2014 proper contained display */\n  .ps-tryon-v2-bg {\n    flex: 0 0 43%; position: relative; min-width: 0;\n    background: var(--ps-bg-secondary);\n    border-radius: 0.9vw; overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .ps-tryon-v2-bg-img {\n    width: 100%; height: 100%; object-fit: contain; object-position: center center;\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-v2-bg-img.ps-tryon-img-hidden { opacity: 0.06; }\n  .ps-tryon-v2-guide {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    opacity: 0; z-index: 1;\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: opacity;\n  }\n  .ps-tryon-v2-guide.ps-visible { opacity: 1; }\n\n  /* Right form panel */\n  .ps-tryon-v2-panel {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column;\n    padding: 0.2vw 0;\n    justify-content: center;\n    animation: ps-v2-fade 0.3s ease forwards;\n  }\n  @keyframes ps-v2-fade {\n    0% { opacity: 0; transform: translateY(0.4vw); }\n    100% { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ps-panel-slide {\n    from { transform: translateX(2vw); opacity: 0; }\n    to { transform: translateX(0); opacity: 1; }\n  }\n\n  /* Top bar */\n  .ps-tryon-v2-top {\n    display: flex; align-items: center; justify-content: space-between;\n    margin-bottom: 0.6vw;\n  }\n  .ps-tryon-v2-title {\n    font-size: 1.2vw; font-weight: 300; color: var(--ps-text-primary);\n    letter-spacing: 0.2em; text-transform: uppercase; margin: 0;\n    font-family: inherit;\n  }\n  .ps-tryon-v2-subtitle {\n    font-size: 0.65vw; font-weight: 400; color: rgba(0,0,0,0.25);\n    margin: 0.15vw 0 0; letter-spacing: 0.03em;\n  }\n  .ps-tryon-v2-unit-toggle {\n    display: flex; gap: 0;\n    border: 1px solid rgba(0,0,0,0.06); border-radius: 2vw; overflow: hidden;\n  }\n  .ps-tryon-v2-unit {\n    background: none; border: none; padding: 0.22vw 0.7vw;\n    font-size: 0.55vw; font-weight: 700; color: rgba(0,0,0,0.2);\n    cursor: pointer; font-family: inherit; letter-spacing: 0.1em;\n    transition: all 0.25s;\n  }\n  .ps-tryon-v2-unit.ps-on {\n    background: rgba(33,84,239,0.15); color: var(--ps-accent);\n  }\n\n  /* Body type card selector */\n  .ps-tryon-bodytype-cards {\n    display: flex; gap: 0.35vw; width: 100%;\n    overflow-x: auto; padding: 0.15vw 0;\n    scrollbar-width: none;\n  }\n  .ps-tryon-bodytype-cards::-webkit-scrollbar { display: none; }\n  .ps-tryon-bodytype-card {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.2vw; padding: 0.4vw 0.2vw;\n    border: 1.5px solid rgba(0,0,0,0.06); border-radius: 0.35vw;\n    background: transparent; color: rgba(0,0,0,0.3);\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-bodytype-card:hover {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.06);\n  }\n  .ps-tryon-bodytype-card.ps-active {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.12);\n    color: var(--ps-accent);\n  }\n  .ps-tryon-bodytype-label {\n    font-size: 0.5vw; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;\n  }\n\n  /* Separator */\n  .ps-tryon-v2-sep {\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(33,84,239,0.2), transparent);\n    margin-bottom: 0.8vw;\n  }\n\n  /* Profile select */\n  .ps-tryon-v2-profile {\n    width: 100%; padding: 0.3vw 0.5vw; margin-bottom: 0.6vw;\n    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);\n    border-radius: 0.3vw; color: rgba(0,0,0,0.08);\n    font-size: 0.6vw; font-family: inherit; cursor: pointer; outline: none;\n    appearance: none; -webkit-appearance: none;\n    transition: border-color 0.2s;\n  }\n  .ps-tryon-v2-profile:focus { border-color: rgba(33,84,239,0.3); }\n\n  /* Fields container \u2014 scrollable */\n  .ps-tryon-v2-fields {\n    flex: 1; min-height: 0; overflow-y: auto;\n    display: flex; flex-direction: column; gap: 0;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n  }\n\n  /* Override float-row for inline look inside v2 */\n  .ps-tryon-v2-fields .ps-tryon-sf-float-row {\n    width: 100%;\n  }\n  /* Label inline with input line */\n  .ps-tryon-v2-fields .ps-tryon-sf-float-field {\n    display: flex; align-items: center; gap: 0.8vw;\n    width: 100%; padding: 0.9vw 0.8vw;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-float-label {\n    flex-shrink: 0;\n    font-size: 0.75vw; font-weight: 500;\n    color: rgba(0,0,0,0.08);\n    letter-spacing: 0.04em;\n    margin: 0; white-space: nowrap;\n    transition: color 0.25s;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n    color: var(--ps-accent);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input {\n    flex: 1; border: none;\n    border-bottom: 1.5px solid rgba(0,0,0,0.1);\n    background: none; padding: 0.25vw 0;\n    font-size: 1vw; font-weight: 400; color: var(--ps-text-primary);\n    font-family: inherit; outline: none;\n    -moz-appearance: textfield;\n    transition: border-color 0.3s;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input:focus {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input::placeholder {\n    color: rgba(0,0,0,0.08);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-outer-spin-button,\n  .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n  /* CTA button */\n  .ps-tryon-v2-cta {\n    margin-top: 0.8vw; padding: 0.65vw 1.5vw;\n    width: auto; min-width: 12vw; display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n    background: var(--ps-accent); color: #fff;\n    border: none; border-radius: 0.35vw;\n    font-size: 0.72vw; font-weight: 700; font-family: inherit;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    flex-shrink: 0;\n  }\n  .ps-tryon-v2-cta svg { width: 0.75vw; height: 0.75vw; }\n  .ps-tryon-v2-cta:hover {\n    background: var(--ps-accent-hover);\n    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n    transform: translateY(-1px);\n  }\n  .ps-tryon-v2-cta svg { width: 0.8vw; height: 0.8vw; stroke: currentColor; }\n\n  /* \u2500\u2500 Size result card rows (split layout) \u2500\u2500 */\n  .ps-tryon-sr-cards-stack {\n    display: flex; flex-wrap: wrap; gap: 0.4vw;\n    flex: 1; min-height: 0; justify-content: center;\n  }\n  /* Cards inside stack: 2 per row, compact, dark */\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard {\n    flex: 1 1 45%; max-width: 49%; min-height: 0; border-radius: 0.5vw;\n    background: #0a0a0a; max-height: 8vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard:not(.ps-has-img) {\n    min-height: 5vw; padding: 0.4vw; max-height: 8vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-bg {\n    max-height: 8vw; width: 100%;\n    object-fit: cover; object-position: center top;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-overlay {\n    height: 100%;\n    background: rgba(0,0,0,0.6);\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-content {\n    padding: 0.4vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-name { font-size: 0.5vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-size { font-size: 1.2vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-badge { font-size: 0.35vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-icon { width: 1.8vw; height: 1.8vw; }\n  .ps-tryon-sr-card-row {\n    display: flex; align-items: center; gap: 0.6vw;\n    padding: 0.6vw 0.7vw;\n    background: rgba(255,255,255,0.02);\n    border: 1px solid rgba(0,0,0,0.04);\n    border-radius: 0.5vw;\n    cursor: pointer; font-family: inherit;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0;\n  }\n  .ps-tryon-sr-card-row:nth-child(1) { animation-delay: 0s; }\n  .ps-tryon-sr-card-row:nth-child(2) { animation-delay: 0.06s; }\n  .ps-tryon-sr-card-row:nth-child(3) { animation-delay: 0.12s; }\n  .ps-tryon-sr-card-row:nth-child(4) { animation-delay: 0.18s; }\n  .ps-tryon-sr-card-row:hover {\n    border-color: var(--ps-accent);\n    background: rgba(33,84,239,0.04);\n    transform: translateX(0.15vw);\n  }\n  .ps-tryon-sr-card-icon {\n    width: 2vw; height: 2vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.1);\n    border-radius: 50%; color: var(--ps-accent);\n  }\n  .ps-tryon-sr-card-icon svg { stroke: currentColor; }\n  .ps-tryon-sr-card-info {\n    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05vw;\n  }\n  .ps-tryon-sr-card-name {\n    font-size: 0.72vw; font-weight: 500; color: var(--ps-text-primary);\n    text-transform: capitalize;\n  }\n  .ps-tryon-sr-card-fit {\n    font-size: 0.55vw; color: var(--ps-text-muted); letter-spacing: 0.03em;\n  }\n  .ps-tryon-sr-card-size {\n    font-size: 1.3vw; font-weight: 300; color: var(--ps-accent);\n    letter-spacing: -0.01em;\n  }\n  .ps-tryon-sr-card-row > svg { color: rgba(0,0,0,0.1); flex-shrink: 0; transition: color 0.2s; }\n  .ps-tryon-sr-card-row:hover > svg { color: var(--ps-accent); }\n\n  /* \u2500\u2500 Result cards v2: bold, clear, unmissable \u2500\u2500 */\n  .ps-tryon-sr-cards-v2 {\n    display: flex; flex-wrap: wrap; gap: 0.4vw;\n    flex: 1; min-height: 0;\n  }\n  .ps-tryon-sr-card-v2 {\n    flex: 1 1 45%; max-width: 49%;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    text-align: center;\n    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 0.6vw; padding: 1vw 0.5vw;\n    cursor: pointer; font-family: inherit;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0; overflow: hidden;\n    min-height: 7vw;\n  }\n  .ps-tryon-sr-card-v2.ps-full { flex: 1 1 100%; max-width: 100%; min-height: 5vw; padding: 0.8vw; }\n  .ps-tryon-sr-card-v2:hover {\n    border-color: var(--ps-accent);\n    background: rgba(33,84,239,0.06);\n    transform: translateY(-2px);\n    box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.08);\n  }\n  .ps-tryon-sr-card-v2-text {\n    display: flex; flex-direction: column; align-items: center; gap: 0.15vw; z-index: 1;\n  }\n  .ps-tryon-sr-card-v2-label {\n    font-size: 0.65vw; font-weight: 600; color: var(--ps-text-secondary);\n    text-transform: uppercase; letter-spacing: 0.1em;\n  }\n  .ps-tryon-sr-card-v2-value {\n    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n    line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }\n  .ps-tryon-sr-card-v2-rec {\n    font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n    text-transform: uppercase; letter-spacing: 0.1em;\n    margin-top: 0.15vw;\n    border: 1px solid rgba(33,84,239,0.25); border-radius: 2vw;\n    padding: 0.1vw 0.5vw;\n  }\n  .ps-tryon-sr-card-v2-img { display: none; }\n  .ps-tryon-sr-card-v2-icon { display: none; }\n\n  /* \u2500\u2500 Photo guide v2 \u2500\u2500 */\n  .ps-tryon-guide-drop-v2 {\n    width: 90%; height: 90%; border-radius: 0.6vw;\n    border: 1.5px dashed rgba(0,0,0,0.08);\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.3vw; cursor: pointer; transition: all 0.25s;\n    position: relative; overflow: hidden;\n  }\n  .ps-tryon-guide-drop-v2:hover, .ps-tryon-guide-drop-v2.ps-drag {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n  }\n  .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(0,0,0,0.06); cursor: default; }\n  .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }\n  .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(0,0,0,0.5); }\n  .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(0,0,0,0.15); }\n  .ps-tryon-guide-drop-v2-img {\n    width: 100%; height: 100%; object-fit: contain; border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-drop-v2-remove {\n    position: absolute; top: 0.4vw; right: 0.4vw;\n    width: 1.4vw; height: 1.4vw; border-radius: 50%;\n    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);\n    color: var(--ps-text-muted); font-size: 0.6vw; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.2s;\n  }\n  .ps-tryon-guide-drop-v2-remove:hover { background: rgba(239,68,68,0.7); }\n\n  .ps-tryon-guide-v2-tips {\n    display: flex; flex-direction: column; gap: 0.4vw;\n    margin: 0.5vw 0;\n  }\n  .ps-tryon-guide-v2-tip {\n    display: flex; align-items: center; gap: 0.4vw;\n    font-size: 0.65vw; color: rgba(0,0,0,0.5);\n  }\n  .ps-tryon-guide-v2-tip-icon {\n    width: 1.2vw; height: 1.2vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 0.55vw; border-radius: 50%;\n    background: rgba(74,222,128,0.1); color: #4ade80;\n  }\n  .ps-tryon-guide-v2-tip.ps-dont .ps-tryon-guide-v2-tip-icon {\n    background: rgba(239,68,68,0.1); color: #f87171;\n  }\n  .ps-tryon-v2-cta:disabled {\n    opacity: 0.4; cursor: not-allowed; transform: none;\n    box-shadow: none;\n  }\n\n  /* Try-on processing overlay on image */\n  .ps-tryon-v2-bg-img.ps-tryon-blur {\n    filter: blur(8px) brightness(0.5); transform: scale(1.05);\n    transition: filter 0.5s ease, transform 0.5s ease;\n  }\n  .ps-tryon-v2-processing-label {\n    position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);\n    z-index: 5; font-size: 0.65vw; font-weight: 500;\n    color: var(--ps-accent); letter-spacing: 0.06em;\n    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);\n    padding: 0.25vw 0.8vw; border-radius: 2vw;\n    animation: ps-loading-pulse 2s ease-in-out infinite;\n  }\n\n  /* \"I don't know\" link */\n  .ps-tryon-v2-dontknow {\n    background: none; border: none;\n    color: var(--ps-accent); font-size: 0.72vw; font-weight: 500;\n    cursor: pointer; font-family: inherit;\n    padding: 0.5vw 0.8vw; text-align: left;\n    transition: color 0.2s;\n  }\n  .ps-tryon-v2-dontknow:hover { color: var(--ps-accent-light); text-decoration: underline; }\n\n  /* Alternative links */\n  .ps-tryon-v2-alt {\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n    margin-top: 0.5vw; flex-shrink: 0;\n  }\n  .ps-tryon-v2-alt button {\n    background: none; border: none; color: rgba(33,84,239,0.5);\n    font-size: 0.58vw; font-weight: 500; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.04em;\n    transition: color 0.2s; padding: 0;\n  }\n  .ps-tryon-v2-alt button:hover { color: var(--ps-accent); }\n  .ps-tryon-v2-alt span { color: rgba(0,0,0,0.06); font-size: 0.55vw; }\n\n  /* Active field row highlight (legacy) */\n  .ps-tryon-sf-row-active { border-bottom-color: var(--ps-accent); }\n  .ps-tryon-sf-row-active .ps-tryon-sf-label { color: var(--ps-accent); }\n  .ps-tryon-sizing-form-col {\n    flex: 1; display: flex; flex-direction: column; justify-content: flex-start;\n    padding: 0.3vw 0; min-height: 0;\n  }\n  .ps-tryon-sf-title {\n    font-size: 1.1vw; font-weight: 300; color: var(--ps-text-primary);\n    margin: 0 0 0.8vw; letter-spacing: 0.12em; text-transform: uppercase;\n    text-align: left;\n    background: linear-gradient(90deg, #fff 0%, rgba(0,0,0,0.5) 100%);\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  .ps-tryon-sf-unit-tabs {\n    display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 0.3vw; overflow: hidden; margin-bottom: 1vw; align-self: flex-start;\n  }\n  .ps-tryon-sf-unit-tab {\n    background: none; border: none; padding: 0.3vw 0.9vw;\n    font-size: 0.62vw; font-weight: 600; color: rgba(0,0,0,0.25); cursor: pointer;\n    font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;\n  }\n  .ps-tryon-sf-unit-tab:hover { color: rgba(0,0,0,0.5); }\n  .ps-tryon-sf-unit-tab.ps-active { color: var(--ps-accent); background: rgba(33,84,239,0.08); }\n\n  .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }\n  .ps-tryon-sf-profile-select {\n    width: 100%; padding: 0.4vw; background: var(--ps-bg-secondary); color: var(--ps-text-secondary);\n    border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n    font-size: 0.75vw; font-family: inherit; cursor: pointer;\n  }\n\n  .ps-tryon-sf-scroll {\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-sf-fields {\n    display: flex; flex-direction: column; gap: 0.8vw;\n  }\n  .ps-tryon-sf-footer {\n    flex-shrink: 0; padding-top: 0.6vw;\n    display: flex; flex-direction: column; gap: 0.4vw;\n  }\n\n  /* \u2500\u2500 Refined line inputs \u2500\u2500 */\n  .ps-tryon-sf-float-row {\n    width: 100%;\n  }\n  .ps-tryon-sf-float-field {\n    width: 100%; position: relative;\n  }\n\n  /* Label \u2014 subtle, editorial */\n  .ps-tryon-sf-float-label {\n    display: block;\n    font-size: 0.58vw; font-weight: 500; color: var(--ps-text-secondary);\n    letter-spacing: 0.1em; text-transform: uppercase;\n    margin-bottom: 0.15vw;\n    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n    color: var(--ps-accent);\n  }\n\n  /* Input \u2014 elegant underline */\n  .ps-tryon-sf-input {\n    width: 100%; box-sizing: border-box;\n    background: none; border: none;\n    border-bottom: 1.5px solid rgba(0,0,0,0.15);\n    color: var(--ps-text-primary);\n    font-size: 0.85vw; font-weight: 300; font-family: inherit;\n    padding: 0.4vw 0; letter-spacing: 0.02em;\n    outline: none;\n    -moz-appearance: textfield;\n    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-sf-input:focus {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-sf-input:not(:placeholder-shown) {\n    border-bottom-color: rgba(0,0,0,0.1);\n  }\n  .ps-tryon-sf-input:focus:not(:placeholder-shown) {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-sf-input::placeholder { color: rgba(0,0,0,0.08); }\n  .ps-tryon-sf-input::-webkit-outer-spin-button,\n  .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n  .ps-tryon-sf-ft-group {\n    display: flex; align-items: stretch; gap: 1vw; width: 100%;\n  }\n  .ps-tryon-sf-ft-group .ps-tryon-sf-float-field { flex: 1; }\n\n  /* Legacy (keep for skeleton/review) */\n  .ps-tryon-sf-row {\n    display: flex; align-items: center; justify-content: center; gap: 1.2vw;\n    padding: 1.3vw 0; max-width: 100%; margin: 0 auto;\n  }\n  .ps-tryon-sf-label {\n    font-size: 0.78vw; font-weight: 700; color: var(--ps-text-secondary);\n    letter-spacing: 0.1em; text-transform: uppercase;\n    flex-shrink: 0; min-width: 5vw;\n  }\n  .ps-tryon-sf-input-wrap { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n  .ps-tryon-sf-inline { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n  .ps-tryon-sf-unit {\n    font-size: 0.73vw; color: var(--ps-text-secondary); font-weight: 500; flex-shrink: 0;\n  }\n\n  .ps-tryon-sf-optional { border-top: 1px solid var(--ps-border-color); margin-top: 0.52vw; padding-top: 0.52vw; }\n  .ps-tryon-sf-optional-toggle {\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; padding: 0.52vw 0.73vw;\n    font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); cursor: pointer;\n    font-family: inherit;\n    border: 1px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: #161616; transition: all 0.2s;\n  }\n  .ps-tryon-sf-optional-toggle:hover { border-color: #555; background: #1a1a1a; }\n  .ps-tryon-sf-optional-arrow {\n    font-size: 0.83vw; color: var(--ps-text-secondary); transition: transform 0.3s ease; display: inline-block;\n  }\n  .ps-tryon-sf-optional-arrow.ps-open { transform: rotate(180deg); }\n  .ps-tryon-sf-optional-fields {\n    display: flex; flex-direction: column; gap: 0.8vw;\n    max-height: 0; overflow: hidden; opacity: 0;\n    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;\n    padding-top: 0;\n  }\n  .ps-tryon-sf-optional-fields.ps-open {\n    max-height: 30vw; opacity: 1; padding-top: 0.7vw;\n  }\n\n  /* Mode switch \u2014 below button */\n  .ps-tryon-sf-mode-switch { margin-top: 0.5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25vw; }\n  .ps-tryon-sf-switch-btn {\n    background: none; border: none; color: rgba(33,84,239,0.7); font-size: 0.65vw;\n    font-weight: 500; cursor: pointer; font-family: inherit;\n    display: inline-flex; align-items: center; gap: 0.2vw;\n    transition: color 0.25s; padding: 0.15vw 0; letter-spacing: 0.03em;\n  }\n  .ps-tryon-sf-switch-btn:hover { color: var(--ps-accent); }\n  .ps-tryon-sf-switch-divider { color: rgba(0,0,0,0.08); font-size: 0.65vw; font-weight: 300; }\n  .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }\n\n  /* How to measure \u2014 overlaid on product image bottom-left */\n  .ps-tryon-sf-measure-overlay {\n    position: absolute; bottom: 0.6vw; left: 0.6vw;\n    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);\n    border: 1px solid var(--ps-border-color); color: var(--ps-text-secondary); font-size: 0.75vw;\n    font-weight: 500; cursor: pointer; font-family: inherit;\n    display: inline-flex; align-items: center; gap: 0.35vw;\n    padding: 0.4vw 0.8vw; border-radius: 0.45vw; transition: all 0.2s;\n  }\n  .ps-tryon-sf-measure-overlay:hover { border-color: var(--ps-accent); color: var(--ps-text-primary); }\n  .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.15); }\n  .ps-tryon-sf-measure-overlay svg { stroke: currentColor; }\n\n  /* Estimation review view */\n  .ps-tryon-est-subtitle {\n    font-size: 0.7vw; color: var(--ps-text-dim); margin: 0 0 0.8vw; line-height: 1.5; text-align: center;\n  }\n  .ps-tryon-est-label-group {\n    display: flex; flex-direction: column; gap: 0.1vw; flex-shrink: 0; min-width: 5vw;\n  }\n  .ps-tryon-sf-estimated-badge {\n    display: inline-block; font-size: 0.45vw; padding: 0.08vw 0.25vw;\n    border-radius: 0.2vw; background: rgba(33,84,239,0.15); color: var(--ps-accent);\n    letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; width: fit-content;\n  }\n  .ps-tryon-sf-edit-icon {\n    width: 0.85vw; height: 0.85vw; stroke: #555; flex-shrink: 0; cursor: pointer;\n    transition: stroke 0.2s;\n  }\n  .ps-tryon-sf-edit-icon:hover { stroke: var(--ps-accent); }\n  .ps-tryon-est-actions {\n    display: flex; align-items: center; gap: 0.8vw; margin-top: 0.6vw;\n  }\n  .ps-tryon-est-back {\n    background: none; border: none; color: var(--ps-text-dim); cursor: pointer; font-size: 0.75vw;\n    font-family: inherit; padding: 0; transition: color 0.2s; flex-shrink: 0; white-space: nowrap;\n  }\n  .ps-tryon-est-back:hover { color: var(--ps-accent); }\n  .ps-tryon-est-submit { flex: 1; min-width: 0; }\n\n  /* Save profile */\n  .ps-tryon-sf-save { margin-top: 0.42vw; display: flex; flex-direction: column; gap: 0.36vw; }\n  .ps-tryon-sf-save-check {\n    display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n  }\n  .ps-tryon-sf-save-check input[type=\"checkbox\"] { width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer; }\n  .ps-tryon-sf-save-name {\n    padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw;\n    background: #111; color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s; animation: ps-fade-up 0.2s ease both;\n  }\n  .ps-tryon-sf-save-name:focus { border-color: var(--ps-accent); }\n\n  .ps-tryon-sf-error {\n    color: var(--ps-error-color); font-size: 0.75vw; text-align: center; margin-top: 0.3vw;\n  }\n  .ps-tryon-sf-next {\n    margin-top: 0.6vw; padding: 0.65vw 2vw;\n    width: 100%;\n    background: linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-light) 100%);\n    color: #0c0c0c; border: none;\n    border-radius: 0.4vw; font-size: 0.78vw;\n    font-weight: 600; cursor: pointer; font-family: inherit;\n    flex-shrink: 0; letter-spacing: 0.06em; text-transform: uppercase;\n    transition: background 0.2s ease, opacity 0.2s ease;\n    box-shadow: 0 0.2vw 1vw rgba(33,84,239,0.15);\n    display: inline-flex; align-items: center; gap: 0.35vw;\n  }\n  .ps-tryon-sf-next:hover { background: var(--ps-accent-hover); }\n  .ps-tryon-sf-next svg { width: 0.85vw; height: 0.85vw; stroke: currentColor; fill: none; }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Height Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-hpk {\n    display: flex; flex-direction: column; align-items: center;\n    height: 100%; min-height: 26vw;\n  }\n  .ps-hpk-title {\n    font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n  }\n  .ps-hpk-desc {\n    font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n  }\n\n  /* Shared toggle */\n  .ps-hpk-toggle {\n    display: inline-flex; border: 1.5px solid var(--ps-border-color); border-radius: 2vw; overflow: hidden;\n    margin-bottom: 0.3vw;\n  }\n  .ps-hpk-toggle button {\n    background: transparent; border: none; color: var(--ps-text-dim); font-size: 0.72vw; font-weight: 600;\n    padding: 0.3vw 1.4vw; cursor: pointer; font-family: inherit; transition: all 0.15s;\n  }\n  .ps-hpk-toggle button.ps-on {\n    background: var(--ps-accent); color: #fff; border-radius: 2vw;\n  }\n\n  /* Main visual area */\n  .ps-hpk-area {\n    position: relative; width: 100%; flex: 1; min-height: 18vw;\n    cursor: ns-resize; touch-action: none; user-select: none;\n    display: flex; align-items: flex-end; justify-content: center;\n  }\n\n  /* Value \u2014 positioned left, floats at indicator height */\n  .ps-hpk-val {\n    position: absolute; left: 0.5vw; transform: translateY(50%);\n    display: flex; align-items: baseline; gap: 0.2vw; z-index: 4;\n    pointer-events: none;\n  }\n  .ps-hpk-num {\n    font-size: 2vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n  }\n  .ps-hpk-unit {\n    font-size: 0.85vw; color: var(--ps-text-secondary); font-weight: 500;\n  }\n\n  /* Model \u2014 center */\n  .ps-hpk-model {\n    display: flex; align-items: flex-end; justify-content: center;\n    transition: height 0.1s ease-out; flex-shrink: 0;\n    position: relative; z-index: 1;\n  }\n  .ps-hpk-model img {\n    height: 100%; width: auto; max-width: 10vw; object-fit: contain;\n    opacity: 0.7;\n    border-radius: 0.4vw;\n  }\n\n  /* Ruler \u2014 right side */\n  .ps-hpk-ruler {\n    position: absolute; right: 0.5vw; top: 0; bottom: 0;\n    width: 4vw; z-index: 2;\n  }\n  .ps-hpk-ruler-line {\n    position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #666;\n  }\n  .ps-hpk-mark {\n    position: absolute; left: 0; display: flex; align-items: center;\n    transform: translateY(50%);\n  }\n  .ps-hpk-mark-tick {\n    width: 0.8vw; height: 1.5px; background: #aaa;\n  }\n  .ps-hpk-mark-label {\n    margin-left: 0.35vw; font-size: 0.75vw; color: var(--ps-text-secondary); font-weight: 600;\n    white-space: nowrap;\n  }\n  .ps-hpk-mark-sm {\n    position: absolute; left: 0; width: 0.45vw; height: 1px; background: #555;\n    transform: translateY(50%);\n  }\n\n  /* Horizontal indicator line \u2014 spans full width */\n  .ps-hpk-line {\n    position: absolute; left: 0; right: 0; height: 2px;\n    background: rgba(33,84,239,0.5); z-index: 3;\n    transform: translateY(50%); pointer-events: none;\n    box-shadow: 0 0 8px rgba(33,84,239,0.3);\n  }\n  .ps-hpk-line::before {\n    content: ''; position: absolute; left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    width: 10px; height: 10px; border-radius: 50%;\n    border: 2px solid var(--ps-accent); background: var(--ps-bg-secondary);\n    box-shadow: 0 0 8px rgba(33,84,239,0.6);\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Weight Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-wpk {\n    display: flex; flex-direction: column; align-items: center;\n    height: 100%; justify-content: center; gap: 0.4vw;\n  }\n  .ps-wpk-title {\n    font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n  }\n  .ps-wpk-desc {\n    font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n  }\n  .ps-wpk-val {\n    display: flex; align-items: baseline; gap: 0.3vw; margin: 1.5vw 0 1vw;\n  }\n  .ps-wpk-num {\n    font-size: 2.8vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n  }\n  .ps-wpk-unit {\n    font-size: 1vw; color: var(--ps-text-dim); font-weight: 500;\n  }\n\n  /* Scale */\n  .ps-wpk-scale-wrap { width: 100%; padding: 0 1vw; }\n  .ps-wpk-track {\n    position: relative; width: 100%; height: 3.5vw;\n    cursor: ew-resize; touch-action: none; user-select: none;\n    border-bottom: 1.5px solid var(--ps-border-color);\n  }\n  .ps-wpk-tick {\n    position: absolute; bottom: 0; width: 1px; height: 0.6vw; background: #444;\n  }\n  .ps-wpk-tick.ps-md { height: 1.1vw; background: #666; }\n  .ps-wpk-tick.ps-mj { height: 1.8vw; background: #aaa; }\n\n  .ps-wpk-indicator {\n    position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 3;\n    display: flex; flex-direction: column; align-items: center; pointer-events: none;\n  }\n  .ps-wpk-ind-line { flex: 1; width: 2px; background: var(--ps-accent); }\n  .ps-wpk-ind-dot {\n    width: 10px; height: 10px; border-radius: 50%;\n    background: var(--ps-accent); border: 2px solid var(--ps-accent); flex-shrink: 0;\n    box-shadow: 0 0 8px rgba(33,84,239,0.7);\n  }\n\n  .ps-wpk-labels {\n    position: relative; width: 100%; height: 1.4vw; margin-top: 0.3vw;\n  }\n  .ps-wpk-labels span {\n    position: absolute; transform: translateX(-50%);\n    font-size: 0.65vw; color: #bbb; font-weight: 600; pointer-events: none;\n  }\n\n  /* Mobile: stack vertically */\n  @media (max-width: 600px) {\n    .ps-tryon-sizing-split { flex-direction: column; }\n    .ps-tryon-sizing-img-col { max-height: 280px; }\n    .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }\n    .ps-tryon-sf-measure-overlay { font-size: 12px; padding: 6px 12px; gap: 5px; bottom: 8px; left: 8px; border-radius: 8px; }\n    .ps-tryon-sf-mode-switch { margin-top: 8px; }\n    .ps-tryon-sf-switch-btn { font-size: 12px; }\n    .ps-hpk-title, .ps-wpk-title { font-size: 18px; }\n    .ps-hpk-desc, .ps-wpk-desc { font-size: 11px; }\n    .ps-hpk-num { font-size: 32px; }\n    .ps-hpk-unit { font-size: 14px; }\n    .ps-hpk-toggle button { font-size: 13px; padding: 5px 18px; }\n    .ps-hpk-area { min-height: 240px; }\n    .ps-hpk-model img { max-width: 100px; }\n    .ps-hpk-mark-label { font-size: 12px; }\n    .ps-hpk-mark-tick { width: 12px; }\n    .ps-wpk-num { font-size: 38px; }\n    .ps-wpk-unit { font-size: 14px; }\n    .ps-wpk-track { height: 50px; }\n    .ps-wpk-labels span { font-size: 10px; }\n  }\n\n  /* Keep old class names for backwards compat */\n  .ps-tryon-section-title { font-size: 0.95vw; font-weight: 600; color: var(--ps-text-primary); margin: 0 0 0.8vw; }\n  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.5vw 1vw; text-align: center; }\n  .ps-tryon-sg-checking-icon { color: var(--ps-accent); margin-bottom: 0.8vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }\n  .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }\n  @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }\n  .ps-tryon-sg-checking-bar-wrap { width: 9vw; height: 4px; background: var(--ps-border-color); border-radius: 2px; overflow: hidden; margin-bottom: 1vw; }\n  .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light)); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }\n  @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }\n  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.3vw; }\n  .ps-tryon-sg-checking-sub { font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; }\n\n  /* Back button */\n  .ps-tryon-back { display: flex; align-items: center; gap: 0.3vw; background: none; border: none; color: var(--ps-text-secondary); font-size: 0.8vw; cursor: pointer; padding: 0; margin-bottom: 0.7vw; font-family: inherit; transition: color 0.2s; }\n  .ps-tryon-back:hover { color: var(--ps-text-primary); }\n  .ps-tryon-back svg { stroke: currentColor; fill: none; }\n\n  /* Sizing form (legacy \u2014 redirect to split view) */\n  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.7vw; }\n  .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }\n  .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: var(--ps-text-secondary); min-width: 4.7vw; flex-shrink: 0; }\n  .ps-tryon-input-row input {\n    flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s; -moz-appearance: textfield;\n  }\n  .ps-tryon-input-row input::-webkit-outer-spin-button,\n  .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-tryon-input-row input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-input-unit { font-size: 0.63vw; color: var(--ps-text-muted); flex-shrink: 0; }\n  .ps-tryon-height-ft { display: flex; align-items: center; gap: 0.31vw; flex: 1; }\n  .ps-tryon-height-ft input { width: 3.13vw; padding: 0.52vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }\n  .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-tryon-height-ft input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-height-ft span { font-size: 0.63vw; color: var(--ps-text-muted); }\n  .ps-tryon-country-select {\n    flex: 1; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n    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\");\n    background-repeat: no-repeat; background-position: right 0.73vw center;\n  }\n  .ps-tryon-country-select:focus { border-color: var(--ps-accent); }\n  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; overflow: hidden; }\n  .ps-tryon-unit-btn {\n    padding: 0.31vw 0.73vw; background: transparent; border: none; color: var(--ps-text-secondary);\n    font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;\n  }\n  .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #fff; }\n\n  /* Unit tabs (cm / inches) */\n  .ps-tryon-unit-tabs {\n    display: flex; gap: 0; background: var(--ps-bg-secondary); border: 1.5px solid var(--ps-border-color);\n    border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;\n  }\n  .ps-tryon-unit-tab {\n    flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;\n    color: var(--ps-text-muted); font-size: 0.78vw; font-weight: 700; cursor: pointer;\n    transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;\n    position: relative;\n  }\n  .ps-tryon-unit-tab:first-child { border-right: 1px solid var(--ps-border-color); }\n  .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.02); }\n  .ps-tryon-unit-tab.ps-active {\n    background: var(--ps-accent); color: #fff;\n  }\n  .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: var(--ps-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }\n  .ps-tryon-optional-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.52vw; margin-top: 0.31vw; }\n  .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; padding: 0.52vw 0.73vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }\n  .ps-tryon-optional-toggle:hover { border-color: #555; color: var(--ps-text-secondary); }\n  .ps-tryon-chevron { transition: transform 0.2s; font-size: 0.73vw; }\n  .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.63vw; }\n  .ps-tryon-shoe-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.73vw; margin-top: 0.31vw; display: flex; flex-direction: column; gap: 0.52vw; }\n  .ps-tryon-shoe-title { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-disclaimer { font-size: 0.57vw; color: var(--ps-text-muted); margin: 0.21vw 0 0; }\n  .ps-tryon-form-save-toggle { margin-top: 0.52vw; display: flex; flex-direction: column; gap: 0.42vw; }\n  .ps-tryon-form-save-check {\n    display: flex; align-items: center; gap: 0.42vw; font-size: 0.68vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n  }\n  .ps-tryon-form-save-check input[type=\"checkbox\"] {\n    width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer;\n  }\n  .ps-tryon-form-save-name {\n    padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s;\n  }\n  .ps-tryon-form-save-name:focus { border-color: var(--ps-accent); }\n\n  /* Processing */\n  .ps-tryon-processing { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n\n  .ps-tryon-processing-image-wrap {\n    position: relative; width: 11.5vw; height: 14.6vw; margin: 0 auto 1.25vw;\n    border-radius: 0.83vw; overflow: hidden; border: 2px solid var(--ps-border-color);\n  }\n  .ps-tryon-processing-blur {\n    position: absolute; inset: -1.04vw; background-size: cover; background-position: center;\n    filter: blur(25px) brightness(0.5); transform: scale(1.2);\n  }\n  .ps-tryon-processing-model {\n    position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;\n  }\n  .ps-tryon-scan-overlay {\n    position: absolute; inset: 0;\n    background: linear-gradient(180deg, rgba(33,84,239,0.05) 0%, transparent 40%, transparent 60%, rgba(33,84,239,0.05) 100%);\n    pointer-events: none;\n  }\n  .ps-tryon-scan-line {\n    position: absolute; left: 0; right: 0; height: 3px;\n    background: linear-gradient(90deg, transparent, #bb945c 20%, var(--ps-accent-light) 50%, #bb945c 80%, transparent);\n    box-shadow: 0 0 0.78vw rgba(33,84,239,0.6), 0 0 2.08vw rgba(33,84,239,0.2);\n    animation: ps-scan 2.5s ease-in-out infinite;\n    pointer-events: none; z-index: 2;\n  }\n  @keyframes ps-scan {\n    0% { top: 0; opacity: 0; }\n    5% { opacity: 1; }\n    95% { opacity: 1; }\n    100% { top: calc(100% - 3px); opacity: 0; }\n  }\n\n  /* Snap processing step cards */\n  .ps-tryon-snap-steps {\n    display: flex; flex-direction: column; gap: 1.2vw;\n    justify-content: center; padding: 2vw 1.5vw;\n  }\n  .ps-tryon-snap-step {\n    display: flex; align-items: center; gap: 0.8vw;\n    padding: 0.8vw 1vw; border-radius: 0.5vw;\n    background: var(--ps-bg-secondary);\n    border: 1px solid var(--ps-border-subtle);\n    color: var(--ps-text-muted);\n    font-size: 0.83vw; font-weight: 500; font-family: inherit;\n    opacity: 0.4;\n    transition: all 0.4s ease;\n  }\n  .ps-tryon-snap-step.ps-active {\n    opacity: 1; color: var(--ps-text-primary);\n    border-color: var(--ps-border-color);\n    animation: ps-pose-fade 0.4s ease both;\n  }\n  .ps-tryon-snap-step.ps-done {\n    opacity: 0.7; color: var(--ps-text-secondary);\n    border-color: rgba(74,222,128,0.2);\n  }\n  .ps-tryon-snap-step-icon {\n    width: 1.4vw; height: 1.4vw;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  }\n  .ps-tryon-snap-check {\n    color: var(--ps-success-color); font-size: 0.9vw; font-weight: 700;\n  }\n  .ps-tryon-snap-num {\n    color: var(--ps-text-muted); font-size: 0.7vw; font-weight: 600;\n  }\n\n  /* Pose measurement overlay \u2014 animated SVG rings on result image */\n  .ps-tryon-pose-overlay {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    pointer-events: none; z-index: 2;\n  }\n  @keyframes ps-pose-draw {\n    to { stroke-dashoffset: 0; }\n  }\n  @keyframes ps-pose-fade {\n    to { opacity: 1; }\n  }\n  @keyframes ps-dot-pulse {\n    0%, 100% { r: 8; opacity: 0.8; }\n    50% { r: 12; opacity: 1; }\n  }\n\n  .ps-tryon-progress-section {\n    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 15.6vw; margin-bottom: 0.83vw;\n  }\n  .ps-tryon-progress-bar-wrap {\n    flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;\n  }\n  .ps-tryon-progress-bar-fill {\n    height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n    border-radius: 3px; transition: width 0.3s ease; width: 0%;\n  }\n  .ps-tryon-progress-pct {\n    font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;\n    font-variant-numeric: tabular-nums;\n  }\n\n  @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n  .ps-tryon-processing-text { font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw; }\n  .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n\n  /* Result \u2014 split layout */\n  .ps-tryon-result-split {\n    display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;\n  }\n  .ps-tryon-result-img-col {\n    flex: 0 0 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.63vw;\n  }\n  .ps-tryon-result-img-col img {\n    width: 100%; max-height: calc(80vh - 8vw); object-fit: contain; border-radius: 0.73vw;\n    box-shadow: 0 0.42vw 1.67vw rgba(0,0,0,0.3); animation: ps-scale-in 0.5s ease both;\n  }\n  .ps-tryon-result-dl-btn {\n    display: inline-flex; align-items: center; gap: 0.31vw;\n    padding: 0.36vw 0.83vw; background: transparent; border: 1px solid var(--ps-border-color);\n    border-radius: 0.42vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-result-dl-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-result-dl-btn svg { stroke: currentColor; }\n  .ps-tryon-result-info-col {\n    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw;\n  }\n  .ps-tryon-result-fit {\n    display: flex; flex-direction: column; gap: 0.36vw;\n  }\n  .ps-tryon-result-fit-row {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.42vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-result-fit-area { font-size: 0.78vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-result-actions-col {\n    display: flex; flex-direction: column; gap: 0.42vw; margin-top: 0.52vw;\n  }\n  .ps-tryon-result-startover {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 0.68vw;\n    font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.2s;\n    text-align: center;\n  }\n  .ps-tryon-result-startover:hover { color: var(--ps-text-secondary); }\n  /* Legacy result layout */\n  .ps-tryon-result-layout { text-align: center; }\n  .ps-tryon-result-layout img { width: 100%; border-radius: 0.63vw; margin-bottom: 0.83vw; }\n  .ps-tryon-result-actions { display: flex; gap: 0.42vw; margin-top: 0.83vw; }\n  .ps-tryon-result-actions button {\n    flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);\n    font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;\n  }\n  .ps-tryon-btn-download { background: var(--ps-accent); color: #fff; }\n  .ps-tryon-btn-download:hover { opacity: 0.9; }\n  .ps-tryon-btn-retry { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }\n  .ps-tryon-btn-retry:hover { background: rgba(0,0,0,0.08); }\n\n  /* \u2500\u2500 Size Result \u2500\u2500 */\n  .ps-tryon-sr { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n  .ps-tryon-sr-loading { text-align: center; padding: 3vw 0; }\n  .ps-tryon-sr-loading p { font-size: 0.83vw; color: var(--ps-text-muted); margin-top: 0.6vw; }\n  .ps-tryon-size-loading-spinner {\n    width: 1.8vw; height: 1.8vw; border: 2px solid var(--ps-border-color);\n    border-top-color: var(--ps-accent); border-radius: 50%;\n    animation: ps-spin 0.7s linear infinite; margin: 0 auto;\n  }\n  @keyframes ps-spin { to { transform: rotate(360deg); } }\n  .ps-tryon-sr-loading-pulse { animation: ps-loading-pulse 2s ease-in-out infinite; }\n  @keyframes ps-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }\n\n  .ps-tryon-sr-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5vw; flex: 1; min-height: 0; overflow: hidden; }\n\n  /* Left: product image */\n  .ps-tryon-sr-img-col {\n    position: relative; border-radius: 0.8vw; overflow: hidden;\n    background: var(--ps-bg-secondary);\n  }\n  .ps-tryon-sr-product-img {\n    width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    display: block; border-radius: 0.8vw;\n    background: var(--ps-bg-secondary);\n  }\n  .ps-tryon-sr-chart-btn {\n    position: absolute; bottom: 1vw; left: 1vw;\n    background: rgba(255,255,255,0.95); color: var(--ps-text-primary); border: none;\n    padding: 0.4vw 0.8vw; border-radius: 0.3vw; font-size: 0.7vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-chart-btn:hover { background: #fff; }\n\n  /* Right column \u2014 scrolls independently */\n  .ps-tryon-sr-right-col {\n    display: flex; flex-direction: column; gap: 0.8vw;\n    overflow-y: auto; min-height: 0;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-sr-right-fixed {\n    overflow: hidden;\n  }\n  .ps-tryon-sr-right-scroll {\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n\n  /* Size hero \u2014 big letter + label */\n  .ps-tryon-sr-size-hero { display: flex; align-items: flex-start; gap: 0.8vw; }\n  .ps-tryon-sr-size-letter {\n    font-size: 3vw; font-weight: 800; color: var(--ps-text-primary); line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sr-size-meta { display: flex; flex-direction: column; gap: 0.15vw; padding-top: 0.3vw; }\n  .ps-tryon-sr-size-label { font-size: 0.65vw; font-weight: 700; color: var(--ps-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }\n  .ps-tryon-sr-size-label.ps-not-rec { color: var(--ps-error-color); }\n  .ps-tryon-sr-edit-link {\n    background: none; border: none; color: var(--ps-accent); font-size: 0.7vw; font-weight: 500;\n    cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; text-align: left;\n  }\n  .ps-tryon-sr-edit-link:hover { color: var(--ps-accent-light); }\n\n  /* Size changed */\n  .ps-tryon-sr-size-changed {\n    display: inline-flex; align-items: center; gap: 0.3vw;\n    padding: 0.3vw 0.6vw; border-radius: 0.3vw;\n    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.2);\n    font-size: 0.7vw; color: var(--ps-accent-light);\n  }\n  .ps-tryon-sr-size-changed svg { stroke: var(--ps-accent); }\n  .ps-tryon-sr-size-changed strong { color: var(--ps-text-primary); }\n\n  /* Tabs */\n  .ps-tryon-sr-tabs { display: flex; border-bottom: 1.5px solid var(--ps-border-color); margin-top: 3.5vh; }\n  .ps-tryon-sr-tab {\n    background: none; border: none; padding: 0.4vw 0.8vw; margin-bottom: -1.5px;\n    font-size: 0.75vw; font-weight: 600; color: var(--ps-text-muted); cursor: pointer;\n    font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.2s;\n  }\n  .ps-tryon-sr-tab:hover { color: var(--ps-text-secondary); }\n  .ps-tryon-sr-tab.ps-active { color: var(--ps-text-primary); border-bottom-color: var(--ps-accent); }\n\n  /* Fit list \u2014 \"Your fit\" tab */\n  /* \u2500\u2500 Fit table \u2500\u2500 */\n  .ps-tryon-sr-fit-table {\n    width: 100%; border-collapse: collapse; font-size: 0.85vw; margin-top: 0.8vw;\n  }\n  .ps-tryon-sr-fit-table thead th {\n    font-size: 0.7vw; font-weight: 500; color: #aaa; text-transform: uppercase;\n    letter-spacing: 0.05em; padding: 0.3vw 0 0.5vw; text-align: left;\n    border-bottom: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-sr-fit-table thead th:last-child { text-align: right; }\n  .ps-tryon-sr-fit-table tbody tr { border-bottom: 1px solid var(--ps-border-subtle); }\n  .ps-tryon-sr-fit-table tbody tr:last-child { border-bottom: none; }\n  .ps-tryon-sr-fit-table td { padding: 0.75vw 0; vertical-align: middle; color: var(--ps-text-primary); }\n  .ps-tryon-sr-fit-table td:last-child { text-align: right; }\n  .ps-tryon-sr-ft-area { font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-sr-ft-you { color: var(--ps-text-primary); font-weight: 600; }\n  .ps-tryon-sr-ft-garment { color: var(--ps-text-secondary); }\n  .ps-tryon-sr-fit-status {\n    font-size: 0.65vw; font-weight: 600; padding: 0.18vw 0.45vw; border-radius: 0.25vw;\n    white-space: nowrap; display: inline-block;\n  }\n  .ps-tryon-sr-fit-status.ps-fit-good { color: #4ade80; background: rgba(74,222,128,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-a-bit-tight { color: #f59e0b; background: rgba(245,158,11,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-tight { color: #e87040; background: rgba(232,112,64,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-too-tight { color: #dc2626; background: rgba(220,38,38,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-a-bit-loose { color: #f59e0b; background: rgba(245,158,11,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-loose { color: #e87040; background: rgba(232,112,64,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-too-loose { color: #dc2626; background: rgba(220,38,38,0.12); }\n\n  /* \u2500\u2500 Size guide fit list (chart tab) \u2500\u2500 */\n  .ps-tryon-sr-fit-list { display: flex; flex-direction: column; gap: 0; }\n  .ps-tryon-sr-fit-item {\n    padding: 0.55vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-sr-fit-item:last-child { border-bottom: none; }\n  .ps-tryon-sr-fit-head {\n    display: flex; justify-content: space-between; align-items: baseline;\n  }\n  .ps-tryon-sr-fit-area { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-sr-fit-range { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-dim); }\n  .ps-tryon-sr-fit-note { font-size: 0.6vw; color: #555; margin-top: 0.5vw; text-align: center; }\n\n  /* \u2500\u2500 Upload photo modal (inline in size result) \u2500\u2500 */\n  .ps-tryon-upload-modal-overlay {\n    position: absolute; inset: 0; z-index: 20;\n    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);\n    display: flex; align-items: center; justify-content: center;\n    border-radius: var(--ps-modal-radius, 0.83vw);\n  }\n  .ps-tryon-upload-modal {\n    background: var(--ps-bg-secondary); border: 1px solid var(--ps-border-color); border-radius: 0.83vw;\n    padding: 1.2vw; width: 80%; max-width: 22vw;\n    display: flex; flex-direction: column; gap: 0.8vw;\n  }\n  .ps-tryon-upload-modal-header {\n    display: flex; justify-content: space-between; align-items: center;\n  }\n  .ps-tryon-upload-modal-header h3 {\n    font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin: 0;\n  }\n  .ps-tryon-upload-modal-close {\n    background: none; border: none; color: var(--ps-text-secondary); font-size: 1.2vw;\n    cursor: pointer; line-height: 1; padding: 0;\n  }\n  .ps-tryon-upload-modal-close:hover { color: var(--ps-text-primary); }\n  .ps-tryon-upload-modal-dropzone {\n    border: 1.5px dashed #444; border-radius: 0.6vw; padding: 1.5vw;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.4vw; cursor: pointer; transition: all 0.2s; min-height: 8vw;\n  }\n  .ps-tryon-upload-modal-dropzone:hover { border-color: var(--ps-accent); }\n  .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-upload-modal-dropzone svg { color: var(--ps-text-muted); }\n  .ps-tryon-upload-modal-dropzone p {\n    font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; font-weight: 500;\n  }\n  .ps-tryon-upload-modal-dropzone span {\n    font-size: 0.6vw; color: var(--ps-text-muted);\n  }\n  .ps-tryon-upload-modal-preview {\n    position: relative; border-radius: 0.6vw; overflow: hidden;\n    max-height: 14vw; display: flex; align-items: center; justify-content: center;\n    background: #111;\n  }\n  .ps-tryon-upload-modal-preview img {\n    width: 100%; max-height: 14vw; object-fit: contain;\n  }\n  .ps-tryon-upload-modal-remove {\n    position: absolute; top: 0.3vw; right: 0.3vw;\n    width: 1.3vw; height: 1.3vw; border-radius: 50%;\n    background: rgba(0,0,0,0.7); border: none; color: var(--ps-text-primary);\n    font-size: 0.8vw; cursor: pointer; display: flex;\n    align-items: center; justify-content: center;\n  }\n  .ps-tryon-upload-modal-remove:hover { background: #dc2626; }\n\n  .ps-tryon-sr-full-chart-btn {\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n    margin: 0.6vw auto 0; padding: 0.4vw 1vw;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-full-chart-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n\n  /* Chart table \u2014 \"Size guide\" tab */\n  /* Full-screen overlay inside the modal */\n  .ps-tryon-sr-chart-overlay {\n    position: absolute; inset: 0; z-index: 50;\n    background: var(--ps-modal-bg, #FFFFFF);\n    display: flex; flex-direction: column;\n    animation: ps-fade-in 0.2s ease;\n    overflow: hidden;\n  }\n  .ps-tryon-sr-chart-modal, .ps-tryon-guide-modal {\n    display: flex; flex-direction: column;\n    flex: 1; min-height: 0; width: 100%; height: 100%;\n  }\n  .ps-tryon-sr-chart-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.7vw 1.2vw; border-bottom: 1px solid var(--ps-border-color); flex-shrink: 0;\n  }\n  .ps-tryon-sr-chart-header h4 { margin: 0; font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }\n  .ps-tryon-sr-chart-close {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 1.1vw; cursor: pointer; padding: 0.2vw;\n    font-family: inherit; transition: color 0.2s;\n  }\n  .ps-tryon-sr-chart-close:hover { color: var(--ps-text-primary); }\n  .ps-tryon-sr-chart-scroll { padding: 1vw 1.2vw; overflow-y: auto; flex: 1; min-height: 0; }\n\n  /* Photo guide \u2014 side by side */\n  .ps-tryon-guide-modal { }\n  .ps-tryon-guide-split {\n    display: flex; flex: 1; min-height: 0; gap: 0; overflow: hidden;\n  }\n  .ps-tryon-guide-left {\n    flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 1vw; border-right: 1px solid #282828;\n    justify-content: center; min-height: 0; overflow: hidden;\n  }\n  .ps-tryon-guide-right {\n    flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 0.8vw; overflow-y: auto; min-height: 0;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-guide-right::-webkit-scrollbar { width: 4px; }\n  .ps-tryon-guide-right::-webkit-scrollbar-track { background: transparent; }\n  .ps-tryon-guide-right::-webkit-scrollbar-thumb { background: var(--ps-border-color); border-radius: 2px; }\n\n  /* Upload dropzone */\n  .ps-tryon-guide-dropzone {\n    border: 1.5px dashed var(--ps-border-color); border-radius: 0.6vw; padding: 1.5vw 1vw;\n    display: flex; flex-direction: column; align-items: center; gap: 0.3vw;\n    cursor: pointer; transition: all 0.2s; text-align: center;\n  }\n  .ps-tryon-guide-dropzone:hover, .ps-tryon-guide-dropzone.ps-drag {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.05);\n  }\n  .ps-tryon-guide-dropzone svg { color: #555; stroke: #555; }\n  .ps-tryon-guide-dropzone-text { margin: 0; font-size: 0.9vw; color: var(--ps-text-primary); font-weight: 600; }\n  .ps-tryon-guide-dropzone p { margin: 0; font-size: 0.65vw; color: var(--ps-text-secondary); font-weight: 500; }\n  .ps-tryon-guide-dropzone span { font-size: 0.52vw; color: var(--ps-text-muted); }\n  .ps-tryon-guide-dropzone.ps-has-file { padding: 0; cursor: default; border-style: solid; flex: 1; min-height: 0; overflow: hidden; }\n\n  /* Preview inside dropzone */\n  .ps-tryon-guide-preview { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n  .ps-tryon-guide-preview img {\n    max-width: 100%; max-height: 100%; object-fit: contain;\n    display: block; border-radius: 0.5vw;\n    background: var(--ps-modal-bg, #FFFFFF);\n  }\n  .ps-tryon-guide-preview-remove {\n    position: absolute; top: 0.4vw; right: 0.4vw;\n    width: 1.4vw; height: 1.4vw; display: flex; align-items: center; justify-content: center;\n    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;\n    color: var(--ps-text-primary); font-size: 0.65vw; cursor: pointer; font-family: inherit;\n    transition: all 0.2s;\n  }\n  .ps-tryon-guide-preview-remove:hover { background: rgba(239,68,68,0.8); }\n\n\n  /* Selected file row */\n  .ps-tryon-guide-file {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.45vw 0.7vw; background: #222; border-radius: 0.4vw; border: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-guide-file-name { font-size: 0.6vw; color: var(--ps-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .ps-tryon-guide-file-remove {\n    background: none; border: none; color: #e55; font-size: 0.55vw; cursor: pointer; font-family: inherit;\n    padding: 0.1vw 0.3vw; transition: color 0.2s;\n  }\n  .ps-tryon-guide-file-remove:hover { color: #f77; }\n\n  /* Tips section */\n  .ps-tryon-guide-tips {\n    border: 1px solid #282828; border-radius: 0.5vw; overflow: hidden;\n  }\n  .ps-tryon-guide-tips-header {\n    display: flex; align-items: center; gap: 0.4vw;\n    padding: 0.5vw 0.7vw; background: #1e1f1e; font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n  }\n  .ps-tryon-guide-tips-header svg { stroke: var(--ps-accent); }\n  .ps-tryon-guide-tips-grid {\n    display: grid; grid-template-columns: 1fr 1fr; gap: 0;\n  }\n  .ps-tryon-guide-do, .ps-tryon-guide-dont { padding: 0.5vw 0.7vw; }\n  .ps-tryon-guide-do { background: rgba(34,197,94,0.06); border-right: 1px solid #282828; }\n  .ps-tryon-guide-dont { background: rgba(239,68,68,0.06); }\n  .ps-tryon-guide-do-title { font-size: 0.68vw; font-weight: 700; color: #4ade80; display: block; margin-bottom: 0.3vw; }\n  .ps-tryon-guide-dont-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; margin-bottom: 0.3vw; }\n  .ps-tryon-guide-do ul, .ps-tryon-guide-dont ul {\n    margin: 0; padding: 0 0 0 0.8vw; list-style: disc;\n  }\n  .ps-tryon-guide-do li, .ps-tryon-guide-dont li {\n    font-size: 0.58vw; color: #bbb; line-height: 1.7;\n  }\n  .ps-tryon-guide-do li { color: #a7f3d0; }\n  .ps-tryon-guide-dont li { color: #fca5a5; }\n\n  /* Quick tip */\n  .ps-tryon-guide-quicktip {\n    display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n    background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-quicktip-icon { font-size: 0.8vw; flex-shrink: 0; }\n  .ps-tryon-guide-quicktip-title { font-size: 0.68vw; font-weight: 700; color: #60a5fa; display: block; }\n  .ps-tryon-guide-quicktip p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #93c5fd; line-height: 1.5; }\n\n  /* Privacy note */\n  .ps-tryon-guide-privacy {\n    display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n    background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-privacy-icon { font-size: 0.8vw; flex-shrink: 0; }\n  .ps-tryon-guide-privacy-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; }\n  .ps-tryon-guide-privacy p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #fca5a5; line-height: 1.5; }\n\n  /* Section title in full chart */\n  .ps-tryon-chart-section { margin-bottom: 1.2vw; }\n  .ps-tryon-chart-section:last-child { margin-bottom: 0; }\n  .ps-tryon-chart-section-title {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.4vw 0; margin-bottom: 0.4vw;\n    border-bottom: 1px solid var(--ps-border-color); font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n  }\n  .ps-tryon-chart-section-rec {\n    font-size: 0.6vw; font-weight: 500; color: var(--ps-text-secondary);\n  }\n  .ps-tryon-chart-section-rec strong {\n    color: var(--ps-accent); font-weight: 700; font-size: 0.7vw;\n  }\n  .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(33,84,239,0.1); }\n  .ps-active-row .ps-size-col { color: var(--ps-accent) !important; font-weight: 700; }\n\n  .ps-tryon-sr-chart-table-wrap { overflow-x: auto; max-height: 14vw; overflow-y: auto; }\n  .ps-tryon-sr-chart-table { width: 100%; font-size: 0.7vw; border-collapse: collapse; }\n  .ps-tryon-sr-chart-table th {\n    text-align: left; padding: 0.35vw 0.5vw; color: var(--ps-text-muted); font-weight: 600;\n    border-bottom: 1px solid var(--ps-border-color); position: sticky; top: 0; background: var(--ps-bg-secondary); color: var(--ps-text-primary);\n  }\n  .ps-tryon-sr-chart-table td { padding: 0.3vw 0.5vw; color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle); }\n  .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(33,84,239,0.08); }\n\n  /* Size chips */\n  .ps-tryon-sr-chips { display: flex; flex-wrap: wrap; gap: 0.4vw; justify-content: center; margin-top: 3.5vh; }\n  .ps-tryon-sr-chip {\n    min-width: 2.2vw; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s; padding: 0.3vw 0.8vw; gap: 0.1vw;\n  }\n  .ps-tryon-sr-chip-hint { font-size: 0.58vw; font-weight: 400; color: var(--ps-text-muted); text-transform: lowercase; }\n  .ps-tryon-sr-chip:hover { border-color: #555; color: var(--ps-text-secondary); }\n  .ps-tryon-sr-chip.ps-active { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; }\n  .ps-tryon-sr-chip.ps-active .ps-tryon-sr-chip-hint { color: #fff; }\n\n  /* Multi-section layout (tuxedo, suit, set products) */\n  .ps-tryon-sr-split-multi { grid-template-columns: 1fr 1fr; }\n  .ps-tryon-sr-img-col-small { }\n  .ps-tryon-sr-multi-top {\n    display: flex; align-items: center; justify-content: space-between;\n    padding-bottom: 0.5vw; margin-bottom: 0.4vw;\n    border-bottom: 1px solid rgba(0,0,0,0.03);\n  }\n  .ps-tryon-sr-multi-title {\n    font-size: 0.9vw; font-weight: 300; color: var(--ps-text-primary);\n    letter-spacing: 0.15em; text-transform: uppercase;\n  }\n\n  /* \u2500\u2500 Full-width section picker \u2014 redesigned \u2500\u2500 */\n  .ps-tryon-sr-picker {\n    display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 0;\n  }\n  .ps-tryon-sr-picker-actions {\n    display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw;\n  }\n\n  /* Card row */\n  .ps-tryon-sec-row {\n    display: flex; gap: 0.5vw;\n  }\n  .ps-tryon-sec-row-compact { flex-wrap: wrap; }\n  .ps-tryon-sec-row-compact .ps-tryon-sec-bigcard { min-width: 40%; flex: 1 1 40%; }\n\n  .ps-tryon-sec-bigcard {\n    position: relative; overflow: hidden;\n    display: flex; flex-direction: column;\n    background: #0e0e0e; border: 1px solid rgba(0,0,0,0.04); border-radius: 0.7vw;\n    cursor: pointer; font-family: inherit;\n    text-align: center; flex: 1; min-width: 0; padding: 0;\n    transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;\n    animation: ps-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0;\n  }\n  .ps-tryon-sec-bigcard:nth-child(1) { animation-delay: 0s; }\n  .ps-tryon-sec-bigcard:nth-child(2) { animation-delay: 0.08s; }\n  .ps-tryon-sec-bigcard:nth-child(3) { animation-delay: 0.16s; }\n  .ps-tryon-sec-bigcard:nth-child(4) { animation-delay: 0.24s; }\n  @keyframes ps-card-in {\n    from { opacity: 0; transform: translateY(1vw) scale(0.96); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  .ps-tryon-sec-bigcard:hover {\n    border-color: var(--ps-accent);\n    transform: translateY(-0.2vw) scale(1.015);\n    box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(33,84,239,0.1);\n  }\n  .ps-tryon-sec-bigcard:not(.ps-has-img) {\n    align-items: center; justify-content: center;\n    padding: 1.2vw 0.8vw; min-height: 14vw; gap: 0.3vw;\n  }\n\n  /* Image */\n  .ps-tryon-sec-bigcard-bg {\n    width: 100%; max-height: 20vw; display: block;\n    object-fit: cover; object-position: center top;\n    border-radius: 0.7vw 0.7vw 0 0;\n    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-bg {\n    transform: scale(1.03);\n  }\n\n  /* Gradient overlay */\n  .ps-tryon-sec-bigcard-overlay {\n    position: absolute; bottom: 0; left: 0; right: 0;\n    height: 65%;\n    background: linear-gradient(to top, #0e0e0e 0%, rgba(14,14,14,0.85) 40%, transparent 100%);\n    z-index: 1;\n  }\n\n  /* Text content */\n  .ps-tryon-sec-bigcard-content {\n    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;\n    display: flex; flex-direction: column; align-items: center; gap: 0.15vw;\n    padding: 0.8vw 0.5vw;\n  }\n\n  /* Fallback icon (no image) */\n  .ps-tryon-sec-bigcard-icon {\n    width: 2.8vw; height: 2.8vw;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.12);\n    border-radius: 50%;\n    color: var(--ps-accent); transition: all 0.3s;\n  }\n  .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-icon {\n    background: rgba(33,84,239,0.12); border-color: rgba(33,84,239,0.25);\n    transform: scale(1.06);\n  }\n  .ps-tryon-sec-bigcard-icon svg { stroke: currentColor; }\n\n  .ps-tryon-sec-bigcard-name {\n    font-size: 0.68vw; font-weight: 400; color: rgba(255,255,255,0.7);\n    text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;\n    text-shadow: 0 1px 6px rgba(0,0,0,0.8);\n  }\n  .ps-tryon-sec-bigcard-size {\n    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n    text-shadow: 0 2px 8px rgba(0,0,0,0.5);\n    line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sec-bigcard-badge {\n    font-size: 0.45vw; font-weight: 600; text-transform: uppercase;\n    color: var(--ps-accent); background: none;\n    border: 1px solid rgba(33,84,239,0.3);\n    padding: 0.12vw 0.45vw; border-radius: 2vw; letter-spacing: 0.08em;\n  }\n  .ps-tryon-sec-bigcard-fit {\n    font-size: 0.52vw; color: rgba(255,255,255,0.45); font-weight: 400;\n    letter-spacing: 0.04em;\n  }\n\n  /* \u2500\u2500 Section detail view (drill-down from card) \u2500\u2500 */\n  @keyframes ps-sec-detail-in {\n    from { opacity: 0; transform: translateX(1vw); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n  .ps-tryon-sec-detail {\n    display: flex; flex-direction: column; gap: 0.5vw;\n    animation: ps-v2-fade 0.3s ease forwards;\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n  }\n  .ps-tryon-sec-detail-back {\n    display: inline-flex; align-items: center; gap: 0.25vw;\n    background: none; border: none; color: rgba(0,0,0,0.3); cursor: pointer;\n    font-size: 0.6vw; font-family: inherit; padding: 0;\n    transition: color 0.2s; align-self: flex-start;\n    letter-spacing: 0.03em;\n  }\n  .ps-tryon-sec-detail-back:hover { color: var(--ps-accent); }\n  .ps-tryon-sec-detail-back svg { width: 0.7vw; height: 0.7vw; stroke: currentColor; }\n  .ps-tryon-sec-detail-header {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding-bottom: 0.4vw;\n    border-bottom: 1px solid rgba(0,0,0,0.04);\n  }\n  .ps-tryon-sec-detail-icon {\n    width: 1.8vw; height: 1.8vw;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.12);\n    border-radius: 50%; color: var(--ps-accent);\n  }\n  .ps-tryon-sec-detail-icon svg { stroke: currentColor; }\n  .ps-tryon-sec-detail-name {\n    font-size: 0.8vw; font-weight: 400; color: var(--ps-text-primary);\n    text-transform: uppercase; letter-spacing: 0.1em;\n  }\n  .ps-tryon-sec-detail .ps-tryon-sr-fit-table td { padding: 0.9vw 0; }\n  .ps-tryon-sec-detail .ps-tryon-sr-fit-table th { padding: 0.4vw 0 0.6vw; }\n  .ps-tryon-sec-detail .ps-tryon-sr-chips { gap: 0.4vw; margin: 0.3vw 0; }\n\n  /* Length inline selector (inside section detail) */\n  .ps-tryon-sec-length-row {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding: 0.3vw 0; border-top: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-sec-length-label {\n    font-size: 0.62vw; font-weight: 600; color: var(--ps-text-secondary);\n    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;\n  }\n\n  /* Reasoning */\n  .ps-tryon-sr-reasoning { padding: 0.8vw; border: 1px solid var(--ps-border-color); border-radius: 0.6vw; background: var(--ps-bg-secondary); }\n  .ps-tryon-sr-reasoning p { font-size: 0.75vw; color: var(--ps-text-secondary); line-height: 1.6; margin: 0; }\n\n  /* Result actions */\n  /* Image action icons \u2014 bottom-left of image */\n  .ps-tryon-sr-img-actions {\n    position: absolute; bottom: 0.6vw; left: 0.6vw; z-index: 3;\n    display: flex; flex-direction: column; gap: 0.3vw;\n  }\n  .ps-tryon-sr-glass-btn {\n    background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--ps-border-color); border-radius: 0.45vw;\n    color: var(--ps-text-primary); font-size: 0.62vw; font-weight: 700; font-family: inherit;\n    padding: 0.4vw 0.8vw; cursor: pointer; transition: all 0.2s;\n    white-space: nowrap; letter-spacing: 0.02em;\n    display: inline-flex; align-items: center;\n  }\n  /* When used standalone on an image (not inside actions container) */\n  .ps-tryon-sr-img-col > .ps-tryon-sr-glass-btn {\n    position: absolute; bottom: 0.5vw; left: 0.5vw; z-index: 3;\n  }\n  .ps-tryon-sr-glass-btn:hover {\n    background: rgba(255,255,255,1); border-color: var(--ps-accent);\n  }\n  .ps-tryon-sr-glass-btn svg, .ps-tryon-sr-img-icon svg { width: 0.65vw; height: 0.65vw; }\n  .ps-tryon-sr-img-icon {\n    display: inline-flex; align-items: center; gap: 0.3vw;\n    padding: 0.35vw 0.7vw;\n    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n    color: var(--ps-text-primary); font-size: 0.6vw; font-weight: 600; font-family: inherit;\n    cursor: pointer; transition: all 0.2s; white-space: nowrap;\n  }\n  .ps-tryon-sr-img-icon:hover { background: #fff; border-color: var(--ps-accent); color: var(--ps-accent); }\n\n  /* See fit visually \u2014 below size chips */\n  .ps-tryon-sr-visual-btn {\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n    width: 100%; padding: 0.5vw; margin-top: 0.3vw;\n    background: transparent; border: 1px solid var(--ps-border-color); border-radius: 0.5vw;\n    color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-visual-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-sr-visual-btn svg { stroke: currentColor; }\n\n  /* Dark overlay behind SVG lines */\n  .ps-tryon-pose-overlay {\n    position: absolute; inset: 0; z-index: 1;\n    background: rgba(0,0,0,0.35);\n    animation: ps-fade-in 0.4s ease both;\n    border-radius: inherit;\n  }\n\n  /* SVG pose overlay */\n  .ps-tryon-pose-svg {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    pointer-events: none; z-index: 2;\n  }\n\n  /* Dotted curved line \u2014 draws in smoothly */\n  .ps-tryon-pose-line {\n    stroke-dashoffset: 80;\n    animation: ps-pose-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  /* HTML pill labels \u2014 positioned absolutely on the image */\n  .ps-tryon-pose-pill {\n    position: absolute; z-index: 3; transform: translateY(-50%);\n    display: flex; align-items: center; gap: 0.4vw;\n    background: rgba(15,15,15,0.85); backdrop-filter: blur(6px);\n    border-radius: 0.5vw; padding: 0.35vw 0.6vw;\n    opacity: 0;\n    animation: ps-pose-pill-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n  .ps-tryon-pose-pill-dot {\n    width: 0.5vw; height: 0.5vw; border-radius: 50%; flex-shrink: 0;\n  }\n  .ps-tryon-pose-pill-text { display: flex; flex-direction: column; gap: 0.05vw; }\n  .ps-tryon-pose-pill-name {\n    font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary); line-height: 1.2;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  .ps-tryon-pose-pill-fit {\n    font-size: 0.6vw; font-weight: 600; line-height: 1.2;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  @keyframes ps-pose-draw {\n    from { stroke-dashoffset: 80; opacity: 0; }\n    10% { opacity: 1; }\n    to { stroke-dashoffset: 0; opacity: 1; }\n  }\n  @keyframes ps-pose-pill-in {\n    from { opacity: 0; transform: translateX(-2px); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n  .ps-tryon-sr-cta {\n    width: 100%; padding: 0.7vw;\n    background: var(--ps-accent); color: #0a0a0a;\n    border: none; border-radius: 0.4vw;\n    font-size: 0.75vw; font-weight: 700; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.1em; text-transform: uppercase;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-top: auto;\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n  }\n  .ps-tryon-sr-cta:hover {\n    background: var(--ps-accent-light);\n    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n    transform: translateY(-1px);\n  }\n\n  /* Size chip recommended dot */\n  .ps-tryon-sr-chip { position: relative; }\n  .ps-tryon-sr-rec-dot {\n    position: absolute; bottom: -0.3vw; left: 50%; transform: translateX(-50%);\n    width: 0.35vw; height: 0.35vw; border-radius: 50%; background: var(--ps-accent);\n  }\n  .ps-tryon-sr-chip.ps-active .ps-tryon-sr-rec-dot { background: #fff; }\n  .ps-tryon-sr-chip.ps-recommended { border-color: var(--ps-accent); }\n\n  /* \u2500\u2500 Full Size Chart Overlay \u2500\u2500 */\n  .ps-tryon-fc-overlay {\n    position: absolute; inset: 0; z-index: 10;\n    background: #111211;\n    display: flex; flex-direction: column;\n    animation: ps-fade-in 0.2s ease;\n  }\n  @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n  .ps-tryon-fc-panel {\n    background: #111211;\n    width: 100%; height: 100%; overflow: hidden;\n    display: flex; flex-direction: column;\n  }\n  .ps-tryon-fc-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.8vw 1.2vw; border-bottom: 1px solid #282828;\n  }\n  .ps-tryon-fc-title {\n    font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary);\n    letter-spacing: 0.12em; margin: 0;\n  }\n  .ps-tryon-fc-close {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 1.4vw;\n    cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s;\n  }\n  .ps-tryon-fc-close:hover { color: var(--ps-text-primary); }\n\n  /* Your measurements bar */\n  .ps-tryon-fc-measures {\n    padding: 0.7vw 1.2vw; background: #1a1a1a; border-bottom: 1px solid #282828;\n  }\n  .ps-tryon-fc-measures-label {\n    display: flex; align-items: center; gap: 0.5vw;\n    font-size: 0.6vw; font-weight: 700; color: var(--ps-text-dim);\n    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4vw;\n  }\n  .ps-tryon-fc-measures-vals {\n    display: flex; gap: 1.5vw;\n  }\n  .ps-tryon-fc-measures-val { font-size: 0.9vw; color: var(--ps-text-secondary); }\n  .ps-tryon-fc-measures-val strong { font-weight: 700; color: var(--ps-text-primary); margin-right: 0.15vw; }\n  .ps-tryon-fc-measures-val span { font-size: 0.65vw; color: var(--ps-text-muted); }\n\n  /* Full table */\n  .ps-tryon-fc-table-wrap {\n    flex: 1; overflow: auto; padding: 0.5vw 1.2vw 1.2vw;\n  }\n  .ps-tryon-fc-table {\n    width: 100%; border-collapse: collapse; font-size: 0.75vw;\n  }\n  .ps-tryon-fc-table th {\n    text-align: center; padding: 0.5vw 0.6vw;\n    font-size: 0.6vw; font-weight: 700; color: var(--ps-text-muted);\n    text-transform: uppercase; letter-spacing: 0.06em;\n    border-bottom: 1.5px solid var(--ps-border-color);\n  }\n  .ps-tryon-fc-table th:first-child { text-align: left; }\n  .ps-tryon-fc-table td {\n    text-align: center; padding: 0.45vw 0.6vw;\n    color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-fc-table td:first-child { text-align: left; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(33,84,239,0.05); }\n  .ps-tryon-fc-rec-pill {\n    display: inline-flex; align-items: center; justify-content: center;\n    background: #fff; color: var(--ps-text-primary); padding: 0.15vw 0.5vw;\n    border-radius: 1vw; font-weight: 800; font-size: 0.7vw;\n  }\n\n  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: var(--ps-accent); } .ps-conf-low { color: var(--ps-error-color); }\n  .ps-tryon-size-compact { padding: 0.5vw 0; }\n  .ps-tryon-size-compact-label { font-size: 0.78vw; color: var(--ps-text-secondary); font-weight: 500; }\n\n  /* Save profile prompt */\n  .ps-tryon-save-prompt { margin-top: 0.73vw; padding: 0.73vw; border: 1px solid var(--ps-border-color); border-radius: 0.63vw; background: var(--ps-bg-secondary); }\n  .ps-tryon-save-label { font-size: 0.63vw; color: var(--ps-text-secondary); margin-bottom: 0.52vw; }\n  .ps-tryon-save-row { display: flex; gap: 0.42vw; }\n  .ps-tryon-save-row input {\n    flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: #111211; color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n  }\n  .ps-tryon-save-row input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-save-row button {\n    padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #fff; border: none; border-radius: 0.52vw;\n    font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;\n  }\n  .ps-tryon-save-row button:hover { opacity: 0.9; }\n  .ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }\n  .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid var(--ps-accent) !important; color: var(--ps-accent) !important; }\n  .ps-tryon-save-new-btn:hover { background: rgba(33,84,239,0.1) !important; }\n  .ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }\n  .ps-tryon-save-done svg { stroke: currentColor; }\n\n  /* Error */\n  .ps-tryon-error { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n  .ps-tryon-error svg { color: var(--ps-error-color); margin-bottom: 0.63vw; }\n  .ps-tryon-error-text { font-size: 0.73vw; color: var(--ps-error-color); margin: 0 0 0.83vw; }\n\n  /* Footer */\n  .ps-tryon-powered { text-align: center; padding: 0.63vw 1.25vw 0.83vw; font-size: 0.57vw; color: var(--ps-text-muted); }\n  .ps-tryon-powered a { color: var(--ps-accent); text-decoration: none; }\n  .ps-tryon-powered a:hover { text-decoration: underline; }\n\n  /* Drawer */\n  .ps-tryon-drawer {\n    position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #FFFFFF);\n    overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1.04vw 1.25vw;\n    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);\n    box-sizing: border-box;\n  }\n  .ps-tryon-drawer-open { transform: translateX(0); }\n  .ps-tryon-drawer-header { display: flex; align-items: center; gap: 0.52vw; padding-bottom: 0.73vw; margin-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); }\n  .ps-tryon-drawer-back {\n    width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n    cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s; flex-shrink: 0;\n  }\n  .ps-tryon-drawer-back:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-drawer-title { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); flex: 1; }\n  .ps-tryon-drawer-add-btn {\n    width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; background: transparent;\n    color: var(--ps-accent); font-size: 1vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s; flex-shrink: 0; line-height: 1;\n  }\n  .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; max-width: 100%; overflow-x: hidden; }\n  .ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: var(--ps-text-muted); font-size: 0.73vw; }\n\n  /* Profile items */\n  .ps-tryon-profile-item {\n    display: flex; align-items: center; gap: 0.63vw; padding: 0.73vw;\n    border: 1px solid var(--ps-border-color); border-radius: 0.63vw; cursor: pointer; transition: all 0.2s;\n  }\n  .ps-tryon-profile-item:hover { border-color: var(--ps-accent); }\n  .ps-tryon-profile-avatar {\n    width: 2.08vw; height: 2.08vw; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.1); flex-shrink: 0;\n  }\n  .ps-tryon-profile-avatar svg { stroke: var(--ps-accent); fill: none; }\n  .ps-tryon-profile-info { flex: 1; min-width: 0; }\n  .ps-tryon-profile-name { font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-profile-detail { font-size: 0.57vw; color: var(--ps-text-secondary); margin-top: 2px; }\n  .ps-tryon-profile-item > svg:last-child { color: var(--ps-text-muted); flex-shrink: 0; transition: color 0.2s; }\n  .ps-tryon-profile-item:hover > svg:last-child { color: var(--ps-accent); }\n\n  /* History items */\n  .ps-tryon-history-item {\n    display: flex; gap: 0.73vw; padding: 0.73vw;\n    border: 1px solid var(--ps-border-color); border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;\n  }\n  .ps-tryon-history-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(33,84,239,0.06); }\n  .ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }\n  .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; }\n  .ps-tryon-history-info { flex: 1; min-width: 0; }\n  .ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n  .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }\n  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }\n  .ps-tryon-history-sizing-reason { font-size: 0.57vw; color: var(--ps-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n  .ps-tryon-history-size-badge {\n    flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));\n    color: #fff; font-size: 0.68vw; font-weight: 700;\n  }\n  .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }\n  .ps-tryon-history-delete {\n    width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;\n    border: none; background: transparent; cursor: pointer; color: var(--ps-text-muted); border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;\n  }\n  .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: var(--ps-error-color); }\n  .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }\n  .ps-tryon-history-clickable { cursor: pointer; }\n  .ps-tryon-history-sections { display: flex; flex-wrap: wrap; gap: 0.3vw; margin-top: 0.31vw; }\n  .ps-tryon-history-section-chip {\n    font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(33,84,239,0.18);\n    border: 1px solid rgba(33,84,239,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;\n  }\n  .ps-tryon-history-tryon-badge {\n    display: inline-block; font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n    background: rgba(33,84,239,0.12); border: 1px solid rgba(33,84,239,0.25);\n    border-radius: 0.25vw; padding: 0.1vw 0.35vw; margin-top: 0.25vw;\n  }\n\n  /* Quiz view */\n  .ps-tryon-quiz-progress { display: flex; gap: 0.4vw; margin-bottom: 1vw; }\n  .ps-tryon-quiz-progress-dot {\n    width: 1.5vw; height: 0.2vw; border-radius: 0.1vw;\n    background: var(--ps-border-color); transition: background 0.3s;\n  }\n  .ps-tryon-quiz-progress-dot.ps-active { background: var(--ps-accent); }\n  .ps-tryon-quiz-basics { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; }\n  .ps-tryon-quiz-options { display: flex; flex-direction: column; gap: 0.5vw; width: 100%; }\n  .ps-tryon-quiz-options.ps-tryon-quiz-row { flex-direction: row; }\n  .ps-tryon-quiz-option {\n    display: flex; flex-direction: column; gap: 0.15vw;\n    padding: 0.7vw 1vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.5vw;\n    background: transparent; color: var(--ps-text-primary); cursor: pointer;\n    font-family: inherit; text-align: left; transition: all 0.2s;\n    flex: 1;\n  }\n  .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(33,84,239,0.12); }\n  .ps-tryon-quiz-option-label { font-size: 0.8vw; font-weight: 600; }\n  .ps-tryon-quiz-option-desc { font-size: 0.6vw; color: var(--ps-text-secondary); }\n\n  /* Profile edit view */\n  .ps-tryon-profile-edit { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; padding: 0.3vw 0.5vw; flex: 1; }\n  .ps-tryon-pe-row {\n    display: flex; align-items: center; gap: 0.8vw;\n  }\n  .ps-tryon-pe-pill {\n    display: inline-flex; border: 1px solid var(--ps-border-color); border-radius: 1.2vw; overflow: hidden;\n  }\n  .ps-tryon-pe-pill-btn {\n    padding: 0.35vw 0.9vw; background: transparent; border: none;\n    color: var(--ps-text-muted); font-size: 0.62vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.15s; white-space: nowrap; line-height: 1.2;\n  }\n  .ps-tryon-pe-pill-btn.ps-active { background: var(--ps-accent); color: #fff; }\n  .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.03); }\n  .ps-tryon-pe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 1.6vw; width: 100%; box-sizing: border-box; }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-field {\n    min-width: 0; padding: 0.15vw 0.4vw;\n    display: flex; align-items: center; gap: 0.6vw;\n  }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-label {\n    flex-shrink: 0; margin: 0; white-space: nowrap;\n    font-size: 0.62vw; color: var(--ps-text-secondary);\n  }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label { color: var(--ps-accent); }\n  .ps-tryon-pe-fields .ps-tryon-sf-input {\n    flex: 1; min-width: 0; padding: 0.3vw 0; font-size: 0.78vw;\n  }\n  .ps-tryon-pe-error {\n    font-size: 0.62vw; color: var(--ps-error-color); font-weight: 500; text-align: center;\n    padding: 0.3vw 0.6vw; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);\n    border-radius: 0.4vw;\n  }\n  .ps-tryon-pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw; margin-top: auto; padding-top: 1.2vw; }\n  .ps-tryon-pe-actions .ps-tryon-est-back { font-size: 0.65vw; }\n  .ps-tryon-pe-save {\n    padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #fff; border: none;\n    border-radius: 0.4vw; font-size: 0.65vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase;\n    display: inline-flex; align-items: center; gap: 0.3vw;\n  }\n  .ps-tryon-pe-save:hover { opacity: 0.85; }\n  .ps-tryon-drawer-create {\n    width: 100%; padding: 0.6vw; margin-bottom: 0.5vw;\n    background: transparent; border: 1.5px dashed var(--ps-border-color);\n    border-radius: 0.5vw; color: var(--ps-accent); font-size: 0.73vw;\n    font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n  }\n  .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-drawer-clear {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 0.6vw;\n    font-weight: 500; cursor: pointer; font-family: inherit; padding: 0.3vw 0;\n    transition: color 0.2s; align-self: center;\n  }\n  .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }\n\n  /* Profile detail modal */\n  .ps-tryon-detail-overlay {\n    position: fixed; inset: 0; background: rgba(0,0,0,0.55);\n    display: flex; align-items: center; justify-content: center;\n    z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;\n  }\n  .ps-tryon-detail-modal {\n    background: var(--ps-bg-primary); border-radius: 0.83vw; width: 100%; max-width: 23vw; max-height: 85vh;\n    overflow-y: auto; box-shadow: 0 1.67vw 3.33vw rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;\n    font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);\n  }\n  .ps-tryon-detail-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.94vw 1.25vw; border-bottom: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }\n  .ps-tryon-detail-header button { background: none; border: none; color: var(--ps-text-secondary); cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }\n  .ps-tryon-detail-header button:hover { background: rgba(0,0,0,0.06); }\n  .ps-tryon-detail-body { padding: 1.04vw 1.25vw; }\n  .ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); margin-bottom: 0.73vw; }\n  .ps-tryon-detail-gender svg { stroke: var(--ps-accent); fill: none; }\n  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.52vw; margin-bottom: 0.83vw; }\n  .ps-tryon-detail-cell { background: var(--ps-bg-secondary); border-radius: 0.52vw; padding: 0.63vw 0.73vw; }\n  .ps-tryon-detail-cell-label { font-size: 0.57vw; color: var(--ps-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.21vw; }\n  .ps-tryon-detail-cell-value { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-detail-date { font-size: 0.57vw; color: var(--ps-text-muted); text-align: center; margin-top: 0.42vw; }\n  .ps-tryon-detail-delete {\n    width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.31vw;\n    padding: 0.63vw; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; background: none;\n    color: var(--ps-error-color); font-size: 0.68vw; font-weight: 500; cursor: pointer; transition: all 0.2s;\n    font-family: inherit; margin-top: 0.83vw;\n  }\n  .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: var(--ps-error-color); }\n  .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Mobile (\u2264768px) \u2014 full-screen drawer, bigger touch targets,\n     px-based sizing (vw becomes sub-pixel and unreadable on phones)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  @media (max-width: 768px) {\n    /* \u2500\u2500 Trigger button: minimum 44px touch target, readable text \u2500\u2500 */\n    .ps-tryon-btn {\n      padding: 12px 20px; font-size: 14px; gap: 8px;\n      border-radius: 8px; min-height: 44px;\n    }\n    .ps-tryon-btn svg { width: 18px; height: 18px; }\n\n    /* \u2500\u2500 Overlay: full screen, no centering, slide-up drawer feel \u2500\u2500 */\n    .ps-tryon-overlay {\n      padding: 0 !important;\n      align-items: stretch !important; justify-content: stretch !important;\n      overflow: hidden !important;\n    }\n\n    /* \u2500\u2500 Modal: occupies entire viewport as a drawer \u2500\u2500 */\n    .ps-tryon-modal,\n    .ps-tryon-modal-wide {\n      max-width: 100vw !important; max-width: 100dvw !important;\n      max-height: 100vh !important; max-height: 100dvh !important;\n      width: 100vw !important; width: 100dvw !important;\n      height: 100vh !important; height: 100dvh !important;\n      min-height: 100vh !important; min-height: 100dvh !important;\n      border-radius: 0 !important; box-shadow: none !important;\n      margin: 0 !important;\n      display: flex !important; flex-direction: column !important;\n      overflow: hidden !important;\n      animation: ps-mobile-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);\n      padding-top: env(safe-area-inset-top);\n      padding-bottom: env(safe-area-inset-bottom);\n      padding-left: env(safe-area-inset-left);\n      padding-right: env(safe-area-inset-right);\n    }\n    .ps-tryon-modal > :last-child { flex: 1; min-height: 0; }\n\n    /* \u2500\u2500 Header: bigger touch targets, fixed top \u2500\u2500 */\n    .ps-tryon-header {\n      border-radius: 0 !important;\n      padding: 10px 14px !important;\n      flex-shrink: 0;\n      background: var(--ps-modal-header-bg, rgba(255,255,255,0.95)) !important;\n    }\n    .ps-tryon-header-icon {\n      width: 40px !important; height: 40px !important;\n      border-radius: 10px !important;\n    }\n    .ps-tryon-header-icon svg { width: 18px !important; height: 18px !important; }\n    .ps-tryon-close { width: 40px !important; height: 40px !important; border-radius: 10px !important; }\n    .ps-tryon-close svg { width: 22px !important; height: 22px !important; }\n\n    /* \u2500\u2500 Body: scrollable, comfortable padding, momentum scroll \u2500\u2500 */\n    .ps-tryon-body {\n      padding: 16px !important;\n      flex: 1 !important; min-height: 0 !important;\n      overflow-y: auto !important; overflow-x: hidden !important;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    /* \u2500\u2500 Back button: bigger, easier to tap \u2500\u2500 */\n    .ps-tryon-back-btn {\n      font-size: 14px !important; gap: 6px !important;\n      margin-bottom: 12px !important; padding: 6px 0 !important;\n    }\n    .ps-tryon-back-btn svg { width: 18px !important; height: 12px !important; }\n\n    /* \u2500\u2500 Preserve existing previews and modal-wide overrides \u2500\u2500 */\n    .ps-tryon-preview { height: 320px; }\n  }\n\n  @keyframes ps-mobile-slide-up {\n    from { transform: translateY(100%); opacity: 0.4; }\n    to   { transform: translateY(0);    opacity: 1;   }\n  }\n  @media (max-width: 720px) {\n    .ps-tryon-result-split { flex-direction: column; }\n    .ps-tryon-result-image-col { flex: none; }\n  }\n  @media (max-width: 480px) {\n    .ps-tryon-body { padding: 18px; }\n    .ps-tryon-header { padding: 14px 18px; }\n    .ps-tryon-stepper { padding: 14px 18px 8px; }\n    .ps-tryon-stepper-circle { width: 24px; height: 24px; font-size: 10px; }\n    .ps-tryon-stepper-label { font-size: 9px; }\n    .ps-tryon-features { flex-direction: column; gap: 8px; }\n    .ps-tryon-feature { flex-direction: row; gap: 10px; text-align: left; }\n    .ps-tryon-feature-icon { margin-bottom: 0; }\n    .ps-tryon-input-row { flex-wrap: wrap; }\n    .ps-tryon-input-row label { min-width: 100%; margin-bottom: -4px; }\n    .ps-tryon-drawer { padding: 16px; }\n    .ps-tryon-detail-grid { gap: 8px; }\n    .ps-tryon-detail-cell { padding: 10px 12px; }\n    .ps-tryon-detail-cell-value { font-size: 14px; }\n    .ps-tryon-detail-modal { max-width: 100%; }\n    .ps-tryon-header-icon { width: 30px; height: 30px; border-radius: 8px; }\n    .ps-tryon-back-btn { font-size: 13px; gap: 6px; margin-bottom: 10px; }\n    .ps-tryon-back-btn svg { width: 16px; height: 10px; }\n    .ps-tryon-sr-fit-table { font-size: 14px; margin-top: 12px; }\n    .ps-tryon-sr-fit-table thead th { font-size: 11px; padding: 4px 0 8px; }\n    .ps-tryon-sr-fit-table td { padding: 12px 0; }\n    .ps-tryon-sr-fit-status { font-size: 10px; padding: 3px 6px; }\n    .ps-tryon-sr-fit-area { font-size: 14px; }\n    .ps-tryon-sr-fit-range { font-size: 14px; }\n    .ps-tryon-upload-modal { width: 90%; max-width: none; padding: 18px; border-radius: 14px; gap: 12px; }\n    .ps-tryon-upload-modal-header h3 { font-size: 15px; }\n    .ps-tryon-upload-modal-close { font-size: 22px; }\n    .ps-tryon-upload-modal-dropzone { padding: 24px; min-height: 120px; border-radius: 10px; }\n    .ps-tryon-upload-modal-dropzone p { font-size: 14px; }\n    .ps-tryon-upload-modal-dropzone span { font-size: 11px; }\n    .ps-tryon-upload-modal-preview { max-height: 200px; border-radius: 10px; }\n    .ps-tryon-upload-modal-preview img { max-height: 200px; }\n    .ps-tryon-upload-modal-remove { width: 24px; height: 24px; font-size: 14px; top: 6px; right: 6px; }\n    /* Multi-section mobile */\n    .ps-tryon-sr-split-multi { grid-template-columns: 1fr; }\n    .ps-tryon-sr-img-col-small { max-height: 200px; }\n    .ps-tryon-sr-multi-title { font-size: 16px; }\n    .ps-tryon-sr-picker { gap: 12px; padding: 4px; }\n    .ps-tryon-sec-row { gap: 8px; }\n    .ps-tryon-sec-bigcard:not(.ps-has-img) { padding: 16px 10px; gap: 6px; min-height: 180px; }\n    .ps-tryon-sec-bigcard { border-radius: 10px; }\n    .ps-tryon-sec-bigcard-content { padding: 12px 8px; }\n    .ps-tryon-sec-bigcard-bg { border-radius: 10px 10px 0 0; }\n    .ps-tryon-sec-bigcard-icon { width: 48px; height: 48px; }\n    .ps-tryon-sec-bigcard-icon svg { width: 26px; height: 26px; }\n    .ps-tryon-sec-bigcard-name { font-size: 13px; }\n    .ps-tryon-sec-bigcard-size { font-size: 28px; }\n    .ps-tryon-sec-bigcard-badge { font-size: 9px; padding: 2px 6px; }\n    .ps-tryon-sec-bigcard-fit { font-size: 10px; }\n    .ps-tryon-sec-detail-back { font-size: 13px; gap: 5px; }\n    .ps-tryon-sec-detail-back svg { width: 14px; height: 14px; }\n    .ps-tryon-sec-detail-header { gap: 10px; padding-bottom: 8px; }\n    .ps-tryon-sec-detail-icon { width: 38px; height: 38px; }\n    .ps-tryon-sec-detail-icon svg { width: 22px; height: 22px; }\n    .ps-tryon-sec-detail-name { font-size: 16px; }\n    .ps-tryon-section-name { font-size: 14px; }\n    .ps-tryon-section-size { font-size: 18px; gap: 6px; }\n    .ps-tryon-section-rec-badge,\n    .ps-tryon-section-notrec-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; }\n    .ps-tryon-sec-detail .ps-tryon-sr-size-letter { font-size: 32px; }\n    .ps-tryon-sec-detail .ps-tryon-sr-chip { min-width: 36px; height: 36px; font-size: 13px; }\n    .ps-tryon-sec-length-row { gap: 8px; padding: 6px 0; }\n    .ps-tryon-sec-length-label { font-size: 11px; }\n    /* Body type cards mobile */\n    .ps-tryon-bodytype-cards { gap: 6px; }\n    .ps-tryon-bodytype-card { padding: 8px 4px; border-radius: 8px; }\n    .ps-tryon-bodytype-label { font-size: 10px; }\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Body Profile Onboarding (ps-bp-*)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n  /* Wrapper for title + split layout */\n  .ps-bp-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n  .ps-bp-shapes-header { flex-shrink: 0; margin-bottom: 0.6vw; text-align: left; }\n  .ps-bp-shapes-header .ps-bp-title { font-size: 1vw; font-weight: 600; }\n  .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: var(--ps-text-muted); font-weight: 400; }\n\n  /* Split layout: product left, form right \u2014 FIXED vh height, never changes */\n  .ps-bp-layout {\n    display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n    overflow: hidden; align-items: center;\n  }\n  .ps-bp-image {\n    flex: 0 0 43%; min-width: 0;\n    height: 100%;\n    background: var(--ps-bg-primary);\n    border-radius: 0.9vw; overflow: hidden;\n    display: flex;\n  }\n  .ps-bp-image-img {\n    width: 100%; height: 100%; object-fit: cover; object-position: center top; flex: 1;\n  }\n  /* Upload zone \u2014 same element as .ps-bp-image, dashed border + centered content, full height */\n  .ps-bp-image.ps-bp-upload-zone {\n    cursor: pointer; border: 2px dashed var(--ps-border-color);\n    align-self: stretch; align-items: center; justify-content: center;\n  }\n  .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.04); }\n  .ps-bp-upload-placeholder {\n    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vw;\n    color: var(--ps-text-muted);\n  }\n  .ps-bp-upload-placeholder svg { width: 2.5vw; height: 2.5vw; stroke: var(--ps-accent); opacity: 0.7; }\n  .ps-bp-upload-text { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-bp-upload-hint { font-size: 0.68vw; color: var(--ps-text-muted); }\n\n  .ps-bp-image-remove {\n    position: absolute; top: 0.5vw; right: 0.5vw;\n    width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n    background: rgba(0,0,0,0.6); border: none; border-radius: 50%;\n    color: var(--ps-text-primary); font-size: 1vw; cursor: pointer; line-height: 1;\n    transition: background 0.15s; z-index: 2;\n  }\n  .ps-bp-image-remove:hover { background: rgba(0,0,0,0.8); }\n\n  .ps-bp-root {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column; gap: 0.6vw; padding: 0.2vw 0.5vw 0.3vw 0;\n    height: 100%; max-height: 100%; overflow: hidden;\n    justify-content: center;\n  }\n\n  /* Step dots */\n  .ps-bp-dots {\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n  }\n  .ps-bp-dot {\n    width: 0.42vw; height: 0.42vw; border-radius: 50%; background: var(--ps-border-color);\n    transition: all 0.3s ease;\n  }\n  .ps-bp-dot-done { background: var(--ps-accent); }\n  .ps-bp-dot-active {\n    background: var(--ps-accent); width: 1.2vw; border-radius: 0.25vw;\n  }\n\n  /* Step container + animation \u2014 fade only, no layout shift */\n  .ps-bp-step { display: flex; flex-direction: column; gap: 1vw; flex: 1; min-height: 0; margin-top: 3vw; }\n  .ps-bp-step-enter { animation: ps-bp-fade 0.25s ease both; }\n  @keyframes ps-bp-fade {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  /* Typography */\n  .ps-bp-title {\n    font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0; letter-spacing: -0.02em; text-align: center;\n  }\n  .ps-bp-subtitle {\n    font-size: 0.78vw; color: var(--ps-text-secondary); margin: -0.4vw 0 0; text-align: center;\n  }\n\n  /* Unit system toggle (Imperial / Metric) */\n  .ps-bp-system-toggle {\n    display: flex; justify-content: center; gap: 1.5vw; margin: 0.3vw 0;\n  }\n  .ps-bp-system-btn {\n    background: none; border: none; padding: 0.2vw 0;\n    font-size: 0.78vw; font-weight: 500; color: var(--ps-text-muted);\n    cursor: pointer; font-family: inherit;\n    border-bottom: 2px solid transparent; transition: all 0.2s;\n  }\n  .ps-bp-system-btn:hover { color: var(--ps-text-secondary); }\n  .ps-bp-system-active {\n    color: var(--ps-text-primary); border-bottom-color: var(--ps-accent);\n  }\n\n  /* Inline field rows (WAIR style) */\n  .ps-bp-inline-fields {\n    display: flex; flex-direction: column; gap: 0; flex: 1;\n    justify-content: center;\n  }\n  .ps-bp-inline-row {\n    display: flex; align-items: center; gap: 1vw;\n    padding: 1vw 0;\n  }\n  .ps-bp-inline-label {\n    flex: 0 0 5.5vw; font-size: 0.68vw; font-weight: 700;\n    color: var(--ps-text-muted); letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n  .ps-bp-inline-input-group {\n    flex: 1; display: flex; align-items: center; gap: 0.4vw;\n  }\n  .ps-bp-inline-input {\n    flex: 1; min-width: 0; padding: 0;\n    background: transparent; border: none; border-bottom: 1px solid var(--ps-border-color);\n    color: var(--ps-text-primary); font-size: 1.1vw; font-weight: 500;\n    font-family: inherit; outline: none;\n    padding-bottom: 0.2vw; transition: border-color 0.2s;\n  }\n  .ps-bp-inline-input:focus { border-bottom-color: var(--ps-accent); }\n  .ps-bp-inline-input::placeholder { color: var(--ps-text-muted); font-weight: 400; }\n  .ps-bp-inline-input::-webkit-outer-spin-button,\n  .ps-bp-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-bp-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n  .ps-bp-inline-unit {\n    font-size: 0.73vw; color: var(--ps-text-muted); font-weight: 500;\n    flex-shrink: 0;\n  }\n\n  /* Photo CTA link */\n  .ps-bp-photo-cta {\n    display: flex; align-items: center; gap: 0.5vw;\n    background: none; border: none; padding: 0.6vw 0;\n    color: var(--ps-accent); font-size: 0.78vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n    margin-top: 0.3vw;\n  }\n  .ps-bp-photo-cta:hover { color: var(--ps-accent-hover); }\n  .ps-bp-photo-cta svg { width: 1vw; height: 1vw; stroke: currentColor; flex-shrink: 0; }\n  .ps-bp-photo-cta-arrow { font-size: 0.9vw; transition: transform 0.2s; }\n  .ps-bp-photo-cta:hover .ps-bp-photo-cta-arrow { transform: translateX(3px); }\n  .ps-bp-photo-cta-done { color: var(--ps-success-color); }\n  .ps-bp-photo-cta-done:hover { color: var(--ps-text-muted); }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Mobile basics step (BasicsStepMobile.tsx) \u2014 matches the reference\n     design: product image at top, big editable numbers, RECOMMENDED\n     upload card. NOT a slider \u2014 the values are real number inputs\n     styled to look like big plain text, so the OS keyboard pops the\n     digit pad on iOS/Android.\n     These styles are scoped to .ps-bpm-* so they don't conflict with\n     the existing desktop .ps-bp-* layout.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-bpm-root {\n    display: flex; flex-direction: column;\n    gap: 10px; padding: 8px 4px 0;\n    flex: 1; min-height: 0;\n  }\n  .ps-bpm-spacer { flex: 1 1 auto; min-height: 8px; }\n  .ps-bpm-header { text-align: center; margin: 4px 0 0; }\n  .ps-bpm-title {\n    font-size: 18px; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0 0 4px; line-height: 1.3;\n  }\n  .ps-bpm-subtitle {\n    font-size: 12px; color: var(--ps-text-muted);\n    margin: 0 auto; max-width: 260px; line-height: 1.45; font-weight: 400;\n  }\n\n  /* Metric / Imperial pill toggle */\n  .ps-bpm-toggle {\n    display: flex; justify-content: center; gap: 24px;\n    margin: 2px 0 4px;\n  }\n  .ps-bpm-toggle-btn {\n    background: none; border: none; padding: 6px 4px;\n    font-family: inherit; font-size: 12px; font-weight: 600;\n    letter-spacing: 0.06em;\n    color: var(--ps-text-muted); cursor: pointer;\n    border-bottom: 1.5px solid transparent;\n    transition: all 0.2s;\n  }\n  .ps-bpm-toggle-btn.ps-active {\n    color: var(--ps-accent);\n    border-bottom-color: var(--ps-accent);\n  }\n\n  /* Slider rows \u2014 label top-left, value top-right, then [-] [track] [+] */\n  .ps-bpm-fields {\n    display: flex; flex-direction: column;\n    margin-top: 4px;\n  }\n  .ps-bpm-row {\n    display: flex; flex-direction: column;\n    padding: 14px 4px;\n    gap: 12px;\n    border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-bpm-row:last-child { border-bottom: none; }\n  .ps-bpm-row-top {\n    display: flex; align-items: center; justify-content: space-between;\n  }\n  .ps-bpm-label {\n    font-size: 11px; font-weight: 600;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    color: var(--ps-text-muted);\n  }\n  .ps-bpm-value-display {\n    font-size: 14px; font-weight: 700;\n    color: var(--ps-text-primary);\n    font-feature-settings: \"tnum\" 1;\n  }\n\n  /* Slider row container: [-] [track] [+] */\n  .ps-bpm-slider-row {\n    display: flex; align-items: center; gap: 12px;\n  }\n  .ps-bpm-step-btn {\n    flex-shrink: 0;\n    width: 34px; height: 34px; border-radius: 50%;\n    background: var(--ps-bg-tertiary); border: none;\n    display: flex; align-items: center; justify-content: center;\n    cursor: pointer;\n    color: var(--ps-text-secondary);\n    transition: background 0.15s, transform 0.1s;\n  }\n  .ps-bpm-step-btn:hover { background: var(--ps-border-color); }\n  .ps-bpm-step-btn:active { transform: scale(0.92); }\n\n  /* The slider \u2014 thicker track, dark navy thumb, monochrome */\n  .ps-bpm-slider {\n    -webkit-appearance: none; appearance: none;\n    flex: 1; min-width: 0;\n    height: 4px; outline: none;\n    background: linear-gradient(\n      to right,\n      var(--ps-text-primary) 0%,\n      var(--ps-text-primary) var(--ps-pct, 0%),\n      var(--ps-border-color) var(--ps-pct, 0%),\n      var(--ps-border-color) 100%\n    );\n    border-radius: 999px; cursor: pointer;\n    margin: 0;\n  }\n  .ps-bpm-slider::-webkit-slider-thumb {\n    -webkit-appearance: none; appearance: none;\n    width: 18px; height: 18px; border-radius: 50%;\n    background: var(--ps-text-primary); border: none;\n    cursor: grab; transition: transform 0.15s ease;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n  }\n  .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }\n  .ps-bpm-slider::-moz-range-thumb {\n    width: 18px; height: 18px; border-radius: 50%;\n    background: var(--ps-text-primary); border: none; cursor: grab;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n  }\n  .ps-bpm-slider::-moz-range-track { background: transparent; height: 4px; }\n\n  /* \"or\" divider \u2014 flanked by hairlines */\n  .ps-bpm-or {\n    display: flex; align-items: center; gap: 12px;\n    margin: 14px 4px 4px;\n  }\n  .ps-bpm-or::before, .ps-bpm-or::after {\n    content: \"\"; flex: 1; height: 1px;\n    background: var(--ps-border-subtle);\n  }\n  .ps-bpm-or span {\n    font-size: 10px; font-weight: 600;\n    text-transform: uppercase; letter-spacing: 0.16em;\n    color: var(--ps-text-muted);\n  }\n\n  /* Minimal upload link \u2014 no card, no background, just text + icons */\n  .ps-bpm-upload-link {\n    display: flex; align-items: center; justify-content: center; gap: 10px;\n    background: none; border: none;\n    padding: 8px 4px; margin: 0;\n    cursor: pointer; font-family: inherit;\n    color: var(--ps-text-primary); font-size: 13px; font-weight: 500;\n    width: 100%;\n    transition: opacity 0.15s;\n  }\n  .ps-bpm-upload-link:hover { opacity: 0.7; }\n  .ps-bpm-upload-link svg { color: var(--ps-text-secondary); flex-shrink: 0; }\n\n  .ps-bpm-error {\n    font-size: 11px; color: var(--ps-error-color);\n    text-align: center; margin: 4px 0 0;\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PhotoStepMobile (.ps-pm-*) \u2014 AI scan / photo upload step.\n     Title + subtitle, large photo preview, \"Checklist for accuracy\"\n     card, dark primary CTA, outlined RETAKE secondary, bottom tabs.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-pm-root {\n    display: flex; flex-direction: column;\n    gap: 14px; padding: 8px 4px 0;\n    flex: 1; min-height: 0;\n  }\n  .ps-pm-header { margin: 4px 0 0; }\n  .ps-pm-title {\n    font-size: 22px; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0 0 6px; line-height: 1.25;\n  }\n  .ps-pm-subtitle {\n    font-size: 13px; color: var(--ps-text-muted);\n    margin: 0; line-height: 1.45; font-weight: 400;\n  }\n\n  /* Photo preview / upload zone */\n  .ps-pm-preview {\n    background: var(--ps-bg-tertiary);\n    border-radius: 10px;\n    height: 280px;\n    overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n    position: relative;\n    flex-shrink: 0;\n  }\n  .ps-pm-preview-img {\n    max-width: 100%; max-height: 100%;\n    width: auto; height: 100%;\n    object-fit: contain; display: block;\n  }\n  .ps-pm-preview-empty {\n    display: flex; flex-direction: column; align-items: center;\n    gap: 6px; padding: 24px;\n    background: none; border: none;\n    color: var(--ps-text-muted); cursor: pointer;\n    font-family: inherit; width: 100%; height: 100%;\n  }\n  .ps-pm-preview-empty svg { color: var(--ps-text-muted); }\n  .ps-pm-preview-empty-title {\n    font-size: 14px; font-weight: 600; color: var(--ps-text-secondary);\n    margin-top: 4px;\n  }\n  .ps-pm-preview-empty-hint {\n    font-size: 11px; color: var(--ps-text-muted);\n  }\n  .ps-pm-preview-remove {\n    position: absolute; top: 10px; right: 10px;\n    width: 28px; height: 28px; border-radius: 6px;\n    background: rgba(255,255,255,0.9); border: none;\n    color: var(--ps-text-primary); cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n    transition: background 0.15s;\n  }\n  .ps-pm-preview-remove:hover { background: #FFFFFF; }\n\n  /* Checklist for accuracy card */\n  .ps-pm-checklist {\n    display: flex; gap: 12px;\n    padding: 12px 14px;\n    background: var(--ps-bg-secondary);\n    border-radius: 10px;\n    border: 1px solid var(--ps-border-subtle);\n  }\n  .ps-pm-checklist-icon {\n    flex-shrink: 0;\n    width: 22px; height: 22px;\n    color: var(--ps-text-primary);\n    display: flex; align-items: center; justify-content: center;\n    margin-top: 1px;\n  }\n  .ps-pm-checklist-body { flex: 1; min-width: 0; }\n  .ps-pm-checklist-title {\n    font-size: 12px; font-weight: 700;\n    color: var(--ps-text-primary);\n    margin-bottom: 5px;\n  }\n  .ps-pm-checklist-items {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .ps-pm-checklist-items li {\n    font-size: 11px; color: var(--ps-text-secondary);\n    padding: 1px 0 1px 12px;\n    position: relative; line-height: 1.5;\n  }\n  .ps-pm-checklist-items li::before {\n    content: \"\u2022\"; position: absolute; left: 2px;\n    color: var(--ps-text-muted);\n  }\n\n  /* Primary CTA: ANALYZE MY SIZE \u2014 uses the user's brand accent */\n  .ps-pm-primary-btn {\n    margin: 0 16px; width: calc(100% - 32px);\n    background: var(--ps-accent); color: #FFFFFF;\n    border: none; border-radius: 8px;\n    padding: 16px 18px;\n    font-family: inherit; font-size: 13px; font-weight: 700;\n    letter-spacing: 0.1em; text-transform: uppercase;\n    cursor: pointer;\n    transition: opacity 0.15s, transform 0.15s;\n  }\n  .ps-pm-primary-btn:active { transform: scale(0.98); }\n  .ps-pm-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n  /* Outlined secondary: RETAKE PHOTO */\n  .ps-pm-secondary-btn {\n    margin: 8px 16px 12px; width: calc(100% - 32px);\n    background: transparent; color: var(--ps-text-secondary);\n    border: 1px solid var(--ps-border-color); border-radius: 8px;\n    padding: 13px 18px;\n    font-family: inherit; font-size: 11px; font-weight: 700;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    cursor: pointer;\n    transition: background 0.15s;\n  }\n  .ps-pm-secondary-btn:hover { background: var(--ps-bg-secondary); }\n\n  /* When the bottom action area contains the primary button (photo step),\n     it needs different padding than the basics step (which has the next btn\n     baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. */\n  .ps-bpm-bottom .ps-pm-primary-btn { margin: 14px 16px 0; }\n\n  /* Bottom action area \u2014 Next button + tab bar grouped together,\n     pushed to the bottom of the modal body by .ps-bpm-spacer above. */\n  .ps-bpm-bottom {\n    display: flex; flex-direction: column;\n    margin: 0 -16px;\n    border-top: 1px solid var(--ps-border-subtle);\n    background: var(--ps-bg-primary);\n    flex-shrink: 0;\n    padding-bottom: env(safe-area-inset-bottom);\n  }\n  .ps-bpm-next-btn {\n    margin: 14px 16px 12px;\n    padding: 14px 18px;\n    background: var(--ps-accent); color: #FFFFFF;\n    border: none; border-radius: 10px;\n    font-family: inherit; font-size: 14px; font-weight: 700;\n    cursor: pointer; transition: opacity 0.15s, transform 0.15s;\n    letter-spacing: 0.02em;\n  }\n  .ps-bpm-next-btn:active { transform: scale(0.98); }\n  .ps-bpm-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n  .ps-bpm-bottom-tabs {\n    display: flex; align-items: stretch;\n    border-top: 1px solid var(--ps-border-subtle);\n    background: var(--ps-bg-primary);\n  }\n  .ps-bpm-bottom-tab {\n    flex: 1; background: none; border: none;\n    padding: 14px 8px 12px;\n    font-family: inherit; font-size: 10px; font-weight: 700;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    color: var(--ps-text-muted); cursor: pointer;\n    border-bottom: 2px solid transparent;\n    transition: color 0.15s, border-color 0.15s;\n    display: flex; align-items: center; justify-content: center; gap: 6px;\n  }\n  .ps-bpm-bottom-tab.ps-active {\n    color: var(--ps-accent);\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-bpm-bottom-tab svg { width: 13px; height: 13px; flex-shrink: 0; }\n\n  .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }\n\n  /* Bra size step \u2014 vertically centered */\n  .ps-bp-bra-step { display: flex; flex-direction: column; justify-content: center; flex: 1; }\n  .ps-bp-bra-step .ps-bp-title { text-align: center; margin-bottom: 1.5vw; }\n\n  /* Bra size selector */\n  .ps-bp-bra-section { margin-bottom: 1.2vw; }\n  .ps-bp-bra-header {\n    display: flex; align-items: center; justify-content: space-between;\n    margin-bottom: 0.5vw;\n  }\n  .ps-bp-bra-label {\n    font-size: 0.6vw; font-weight: 600; color: rgba(255,255,255,0.45);\n    letter-spacing: 0.08em; text-transform: uppercase;\n  }\n  /* Region dropdown */\n  .ps-bp-bra-region-wrap { position: relative; z-index: 100; }\n  .ps-bp-bra-region-trigger {\n    display: flex; align-items: center; gap: 0.35vw;\n    padding: 0.45vw 0.9vw; border: 1.5px solid rgba(0,0,0,0.1);\n    border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.8vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.25s;\n  }\n  .ps-bp-bra-region-trigger:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-bp-bra-region-arrow {\n    font-size: 0.55vw; transition: transform 0.25s;\n  }\n  .ps-bp-bra-region-arrow.ps-open { transform: rotate(180deg); }\n  .ps-bp-bra-region-dropdown {\n    position: absolute; top: calc(100% + 0.3vw); right: 0;\n    min-width: 5vw; background: var(--ps-bg-secondary);\n    border: 1.5px solid rgba(0,0,0,0.08); border-radius: 0.4vw;\n    box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.5);\n    overflow: hidden; animation: ps-bp-fade 0.2s ease both;\n    padding: 0.25vw; z-index: 200;\n  }\n  .ps-bp-bra-region-item {\n    display: block; width: 100%; padding: 0.4vw 0.7vw;\n    background: transparent; border: none; border-radius: 0.3vw;\n    color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; text-align: left;\n    transition: all 0.15s;\n  }\n  .ps-bp-bra-region-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }\n  .ps-bp-bra-region-item.ps-selected { color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n  .ps-bp-bra-grid {\n    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35vw;\n  }\n  .ps-bp-bra-btn {\n    padding: 0.4vw 0; text-align: center;\n    background: transparent; border: 1px solid rgba(0,0,0,0.08);\n    border-radius: 0.35vw; color: var(--ps-text-secondary);\n    font-size: 0.65vw; font-weight: 500; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-bp-bra-btn:hover { border-color: rgba(0,0,0,0.3); color: var(--ps-text-primary); }\n  .ps-bp-bra-btn-selected {\n    background: var(--ps-accent) !important; border-color: var(--ps-accent) !important;\n    color: #fff !important; font-weight: 700;\n  }\n  /* Bra result */\n  .ps-bp-bra-result {\n    text-align: center; font-size: 0.85vw; color: rgba(0,0,0,0.5);\n    margin-top: 0.8vw; font-weight: 400;\n  }\n  .ps-bp-bra-result strong {\n    color: var(--ps-accent); font-weight: 700; font-size: 1vw;\n  }\n  .ps-bp-bra-bust {\n    display: block; margin-top: 0.2vw;\n    font-size: 0.75vw; color: rgba(0,0,0,0.3); font-weight: 400;\n  }\n\n  /* Profile option rows \u2014 WAIR style stacked list */\n  .ps-bp-options {\n    display: flex; flex-direction: column; gap: 0.5vw;\n    margin-top: 0.8vw;\n  }\n  .ps-bp-option {\n    display: flex; align-items: center; gap: 0.8vw;\n    padding: 0.35vw 1vw 0.35vw 0.35vw;\n    background: #fff; border: 1.5px solid rgba(0,0,0,0.06);\n    border-radius: 0.6vw; cursor: pointer;\n    transition: all 0.25s ease; font-family: inherit;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.05);\n  }\n  .ps-bp-option:hover {\n    border-color: rgba(33,84,239,0.5);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    transform: translateY(-1px);\n  }\n  .ps-bp-option:hover .ps-bp-illust svg { transform: scale(1.05); }\n  .ps-bp-option-selected {\n    border-color: var(--ps-accent) !important;\n    box-shadow: 0 4px 12px rgba(33,84,239,0.18) !important;\n  }\n  .ps-bp-option-icon {\n    width: 6vw; height: 6vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    border-radius: 0.4vw; overflow: hidden;\n  }\n  .ps-bp-illust { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }\n  .ps-bp-illust svg { width: 100%; height: 100%; transition: transform 0.25s ease; }\n  .ps-bp-option-label {\n    flex: 1; font-size: 0.73vw; font-weight: 500;\n    color: #555; text-align: center;\n  }\n  .ps-bp-option-selected .ps-bp-option-label { color: var(--ps-accent); font-weight: 600; }\n  .ps-bp-option::after {\n    content: \"\u203A\"; font-size: 1.1vw; color: var(--ps-text-secondary); flex-shrink: 0;\n    transition: all 0.25s ease;\n  }\n  .ps-bp-option:hover::after { color: var(--ps-accent); transform: translateX(2px); }\n  .ps-bp-option-selected::after { color: var(--ps-accent); }\n\n  /* Single question step \u2014 3 cards centered */\n  .ps-bp-single-q { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; }\n  .ps-bp-single-q .ps-bp-title { margin-bottom: 1vw; width: 100%; text-align: center; font-size: 1.05vw; font-weight: 700; letter-spacing: 0.01em; }\n  .ps-bp-shape-row-full { width: 100%; margin: 1.5vw auto 0; }\n  .ps-bp-shape-row-full .ps-bp-img-card { max-height: 18vw; padding: 0.8vw 0.6vw 0; }\n  .ps-bp-shape-row-full .ps-bp-img-card-thumb { height: 13vw; }\n\n  /* Body shapes screen \u2014 fit all questions without scrolling */\n  .ps-bp-shapes-fit { display: flex; flex-direction: column; flex: 1; overflow: hidden; gap: 0.4vw; justify-content: flex-start !important; }\n\n  /* Body shapes combined screen */\n  .ps-bp-shape-section {\n    margin-bottom: 0.4vw; flex: 1; display: flex; flex-direction: column; min-height: 0;\n  }\n  .ps-bp-shape-label {\n    font-size: 0.55vw; font-weight: 500; color: rgba(255,255,255,0.7);\n    margin-bottom: 0.3vw; display: flex; align-items: center; gap: 0.6vw;\n    text-transform: uppercase; letter-spacing: 0.05em;\n  }\n  .ps-bp-shape-label::after {\n    content: \"\"; flex: 1; height: 1px;\n    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);\n  }\n  .ps-bp-shape-row {\n    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5vw;\n    flex: 1; min-height: 0;\n  }\n  .ps-bp-img-card {\n    display: flex; flex-direction: column; align-items: center;\n    background: transparent; border: 2px solid rgba(0,0,0,0.08);\n    border-radius: 0.5vw; overflow: hidden; cursor: pointer;\n    transition: all 0.2s ease; padding: 0; font-family: inherit;\n    position: relative;\n  }\n  .ps-bp-img-card:hover {\n    border-color: rgba(33,84,239,0.4);\n    transform: translateY(-0.1vw);\n  }\n  .ps-bp-img-card-selected {\n    border-color: var(--ps-accent) !important;\n    border-width: 2.5px !important;\n  }\n  .ps-bp-img-card-selected .ps-bp-img-card-label {\n    font-weight: 700; color: var(--ps-accent);\n  }\n  .ps-bp-img-card-check {\n    display: none; position: absolute; top: 0.3vw; right: 0.3vw;\n    width: 1.1vw; height: 1.1vw; border-radius: 50%;\n    background: var(--ps-accent); align-items: center; justify-content: center;\n    z-index: 1;\n  }\n  .ps-bp-img-card-check svg { width: 0.6vw; height: 0.6vw; }\n  .ps-bp-img-card-selected .ps-bp-img-card-check { display: flex; }\n  .ps-bp-img-card .ps-bp-img-card-thumb { opacity: 1; }\n  .ps-bp-img-card-thumb {\n    width: 100%; flex: 1; min-height: 0; overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n    background: transparent;\n  }\n  .ps-bp-img-card-img {\n    width: 100%; height: 100%; object-fit: contain;\n  }\n  .ps-bp-img-card .ps-bp-illust { width: 80%; height: 80%; }\n  .ps-bp-img-card .ps-bp-illust svg { width: 100%; height: 100%; }\n  .ps-bp-img-card-label {\n    padding: 0.3vw 0.2vw; font-size: 0.6vw; font-weight: 600;\n    color: var(--ps-text-secondary); text-align: center; width: 100%;\n    transition: opacity 0.2s;\n  }\n  /* Hover hint text below cards */\n  .ps-bp-hover-hint {\n    text-align: center; font-size: 0.8vw; color: rgba(0,0,0,0.45);\n    margin: 0.15vw 0 0; min-height: 1em; transition: opacity 0.2s;\n    font-weight: 400; letter-spacing: 0.01em;\n  }\n\n  /* Photo upload */\n  .ps-bp-photo-upload {\n    display: flex; align-items: center; gap: 0.6vw;\n    width: 100%; padding: 0.7vw 0.8vw;\n    background: transparent; border: 1.5px dashed var(--ps-border-color);\n    border-radius: 0.5vw; cursor: pointer;\n    transition: all 0.2s; color: var(--ps-text-muted);\n    font-family: inherit; text-align: left;\n  }\n  .ps-bp-photo-upload:hover {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n    color: var(--ps-text-secondary);\n  }\n  .ps-bp-photo-upload svg { flex-shrink: 0; opacity: 0.6; }\n  .ps-bp-photo-upload-text { font-size: 0.78vw; font-weight: 500; }\n  .ps-bp-photo-upload-hint { font-size: 0.62vw; color: var(--ps-text-muted); margin-left: auto; }\n\n  .ps-bp-photo-preview {\n    display: flex; align-items: center; gap: 0.6vw;\n    padding: 0.5vw; border: 1.5px solid var(--ps-accent);\n    border-radius: 0.5vw; background: rgba(33,84,239,0.06);\n  }\n  .ps-bp-photo-thumb {\n    width: 2.8vw; height: 2.8vw; object-fit: cover;\n    border-radius: 0.4vw; flex-shrink: 0;\n  }\n  .ps-bp-photo-info { display: flex; flex-direction: column; gap: 0.1vw; flex: 1; min-width: 0; }\n  .ps-bp-photo-status {\n    font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary);\n    display: flex; align-items: center; gap: 0.3vw;\n  }\n  .ps-bp-photo-hint { font-size: 0.62vw; color: var(--ps-text-muted); }\n  .ps-bp-photo-remove {\n    width: 1.5vw; height: 1.5vw; display: flex; align-items: center; justify-content: center;\n    background: none; border: none; color: var(--ps-text-muted);\n    cursor: pointer; font-size: 1vw; line-height: 1; border-radius: 0.25vw;\n    transition: all 0.15s; flex-shrink: 0;\n  }\n  .ps-bp-photo-remove:hover { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); }\n\n  /* Error */\n  .ps-bp-error {\n    color: var(--ps-error-color); font-size: 0.73vw; margin: 0;\n  }\n\n  /* Navigation \u2014 back left, next right */\n  .ps-bp-nav {\n    display: flex; align-items: center; margin-top: auto;\n    justify-content: space-between;\n  }\n  .ps-bp-back-btn {\n    background: none; border: none; padding: 0;\n    color: var(--ps-text-muted); cursor: pointer;\n    font-size: 0.83vw; font-weight: 500; font-family: inherit;\n    white-space: nowrap; display: flex; align-items: center; gap: 0.3vw;\n    transition: color 0.2s;\n  }\n  .ps-bp-back-btn:hover { color: var(--ps-text-primary); }\n  .ps-bp-back-arrow {\n    display: inline-block; font-size: 1.1vw; transition: transform 0.25s ease;\n  }\n  .ps-bp-back-btn:hover .ps-bp-back-arrow { transform: translateX(-4px); }\n  .ps-bp-next-btn {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding: 0.45vw 1.2vw;\n    background: var(--ps-accent); border: none; border-radius: 0.35vw;\n    color: #fff; font-size: 0.73vw; font-weight: 700;\n    cursor: pointer; transition: all 0.15s; font-family: inherit;\n    white-space: nowrap;\n  }\n  .ps-bp-next-btn svg { width: 0.75vw; height: 0.75vw; }\n  .ps-bp-next-btn:hover { background: var(--ps-accent-hover); }\n  .ps-bp-btn-disabled {\n    opacity: 0.35; cursor: not-allowed; pointer-events: none;\n  }\n\n  /* \u2500\u2500 Mobile responsive \u2500\u2500 */\n  @media (max-width: 768px) {\n    .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }\n    /* Desktop layout's product image \u2014 hidden on mobile because BasicsStepMobile\n       has its own minimal layout. The other steps (chest/midsection/hips) don't\n       need the giant left-column image on a phone either. */\n    .ps-bp-image { display: none !important; }\n    .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ps-bp-layout { flex: 1; min-height: 0; }\n    /* Override desktop justify-content:center so BasicsStepMobile can\n       stretch to the bottom of the modal \u2014 its bottom action bar (Next +\n       tabs) needs to land at the bottom edge, not floating in the middle. */\n    .ps-bp-root {\n      justify-content: stretch !important;\n      height: auto !important;\n      max-height: none !important;\n      overflow: visible !important;\n      flex: 1 !important;\n    }\n    .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }\n    .ps-bp-upload-text { font-size: 14px; }\n    .ps-bp-upload-hint { font-size: 11px; }\n    .ps-bp-root { padding: 16px; gap: 14px; overflow: visible; }\n    .ps-bp-dots { gap: 6px; }\n    .ps-bp-dot { width: 6px; height: 6px; }\n    .ps-bp-dot-active { width: 18px; border-radius: 4px; }\n    .ps-bp-title { font-size: 18px; }\n    .ps-bp-subtitle { font-size: 13px; margin-top: -4px; }\n    .ps-bp-system-toggle { gap: 20px; margin: 4px 0; }\n    .ps-bp-system-btn { font-size: 13px; }\n    .ps-bp-inline-row { padding: 14px 0; gap: 12px; }\n    .ps-bp-inline-label { flex: 0 0 70px; font-size: 11px; }\n    .ps-bp-inline-input { font-size: 18px; }\n    .ps-bp-inline-unit { font-size: 12px; }\n    .ps-bp-photo-cta { font-size: 13px; gap: 6px; margin-top: 4px; }\n    .ps-bp-photo-cta svg { width: 16px; height: 16px; }\n    .ps-bp-options { gap: 6px; }\n    .ps-bp-option { border-radius: 10px; padding: 6px 12px 6px 6px; gap: 10px; }\n    .ps-bp-option-icon { width: 70px; height: 70px; }\n    .ps-bp-option-label { font-size: 14px; }\n    .ps-bp-option::after { font-size: 18px; }\n    .ps-bp-option { padding: 14px 8px; border-radius: 10px; gap: 8px; }\n    .ps-bp-option-icon { width: 56px; height: 56px; }\n    .ps-bp-option-label { font-size: 13px; }\n    .ps-bp-error { font-size: 12px; }\n    .ps-bp-shape-section { margin-bottom: 12px; }\n    .ps-bp-shape-label { font-size: 13px; margin-bottom: 6px; }\n    .ps-bp-shape-row { gap: 6px; }\n    .ps-bp-img-card { border-radius: 8px; border-width: 2px; }\n    .ps-bp-img-card-label { font-size: 11px; padding: 4px 2px; }\n    .ps-bp-hover-hint { font-size: 10px; margin-top: 6px; }\n    .ps-bp-single-q .ps-bp-title { font-size: 13px; font-weight: 400; }\n    .ps-bp-photo-upload { padding: 10px 12px; gap: 8px; border-radius: 8px; }\n    .ps-bp-photo-upload-text { font-size: 13px; }\n    .ps-bp-photo-upload-hint { font-size: 10px; }\n    .ps-bp-photo-preview { padding: 8px; gap: 8px; border-radius: 8px; }\n    .ps-bp-photo-thumb { width: 40px; height: 40px; border-radius: 6px; }\n    .ps-bp-photo-status { font-size: 12px; gap: 4px; }\n    .ps-bp-photo-hint { font-size: 10px; }\n    .ps-bp-photo-remove { width: 22px; height: 22px; font-size: 16px; }\n    .ps-bp-nav { padding-top: 6px; }\n    .ps-bp-back-btn { font-size: 14px; }\n    .ps-bp-back-arrow { font-size: 18px; }\n    .ps-bp-next-btn {\n    display: flex; align-items: center; gap: 0.5vw; padding: 10px 16px; font-size: 13px; border-radius: 6px; }\n    .ps-bp-root { padding: 12px; overflow: hidden; }\n  }\n\n  /* Upload hover overlay */\n  .ps-tryon-upload-hover:hover .ps-tryon-upload-hover-overlay { opacity: 1 !important; }\n";
+export declare const STYLES = "\n  /* Variable defaults must live on BOTH the root (for the trigger button)\n     and the overlay (which is React-portaled to <body> and therefore not\n     a descendant of .ps-tryon-root, so the cascade is broken). Without\n     this duplication the slider track gradient and the thumb border \u2014\n     both var(--ps-accent) \u2014 render as unset and become invisible. */\n  .ps-tryon-root,\n  .ps-tryon-overlay {\n    --ps-accent: #3B82F6;\n    --ps-accent-hover: #2563EB;\n    --ps-accent-light: #BFDBFE;\n    --ps-text-primary: #1C1D1E;\n    --ps-text-secondary: #454545;\n    --ps-text-muted: #84898C;\n    --ps-text-dim: #696E71;\n    --ps-border-color: #E7E7E7;\n    --ps-border-subtle: #F0F0F0;\n    --ps-bg-primary: #FFFFFF;\n    --ps-bg-secondary: #F8FAFF;\n    --ps-bg-tertiary: #F0F0F0;\n    --ps-input-bg: #FFFFFF;\n    --ps-input-border: #E7E7E7;\n    --ps-input-focus-border: var(--ps-accent);\n    --ps-error-color: #E7000B;\n    --ps-success-color: #1C9D4C;\n    --ps-warning-color: #DF8400;\n    --ps-logo-height: 2.8vw;\n  }\n  .ps-tryon-root { display: inline-block; visibility: visible !important; }\n\n  .ps-tryon-btn {\n    display: inline-flex; align-items: center; gap: clamp(6px, 0.42vw, 8px);\n    padding: var(--ps-btn-padding, clamp(10px, 0.63vw, 14px) clamp(16px, 1.25vw, 24px));\n    background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);\n    font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);\n    font-size: var(--ps-btn-font-size, clamp(13px, 0.73vw, 15px)); font-weight: var(--ps-btn-font-weight, 600);\n    border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, clamp(6px, 0.42vw, 8px));\n    cursor: pointer; transition: all 0.2s ease;\n    width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);\n    box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;\n    box-sizing: border-box;\n  }\n  .ps-tryon-btn svg { width: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); height: var(--ps-btn-icon-size, clamp(16px, 0.94vw, 18px)); flex-shrink: 0; }\n  .ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, var(--ps-accent-hover)); transform: translateY(-1px); }\n  .ps-tryon-btn:active { transform: translateY(0); }\n\n  .ps-tryon-overlay {\n    position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));\n    display: flex; align-items: center; justify-content: center;\n    z-index: 2147483647;\n    isolation: isolate;\n    contain: layout style;\n    padding: 0.83vw;\n    padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));\n    animation: ps-fade-in 0.2s ease;\n    overflow-y: auto; -webkit-overflow-scrolling: touch;\n    font-family: system-ui, -apple-system, sans-serif;\n    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;\n    box-sizing: border-box;\n  }\n  .ps-tryon-overlay, .ps-tryon-overlay *, .ps-tryon-overlay *::before, .ps-tryon-overlay *::after { box-sizing: border-box; }\n  @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n\n  .ps-tryon-modal {\n    background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);\n    border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);\n    max-width: var(--ps-modal-max-width, 36vw); max-height: 92vh; overflow-y: auto;\n    font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);\n    box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.08); animation: ps-slide-up 0.3s ease;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n    flex-shrink: 0;\n  }\n  .ps-tryon-modal-wide { max-width: 55vw; width: 55vw; height: 70vh; max-height: 70vh; display: flex; flex-direction: column; overflow: visible; }\n  .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }\n  @keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }\n\n  /* Header */\n  .ps-tryon-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.7vw 1.25vw; background: var(--ps-modal-header-bg, rgba(255,255,255,0.95));\n    border-bottom: 1px solid var(--ps-border-color);\n    border-radius: var(--ps-modal-radius, 0.83vw) var(--ps-modal-radius, 0.83vw) 0 0;\n    backdrop-filter: blur(12px);\n  }\n  .ps-tryon-header-minimal {\n    justify-content: flex-end; gap: 0.4vw; padding: 0.4vw 0.8vw;\n  }\n  .ps-tryon-back-btn {\n    display: flex; align-items: center; gap: 0.35vw;\n    background: none; border: none; color: var(--ps-text-secondary); cursor: pointer;\n    font-size: 0.73vw; padding: 0; margin-bottom: 0.63vw;\n    transition: color 0.2s;\n  }\n  .ps-tryon-back-btn:hover { color: var(--ps-text-primary); }\n  .ps-tryon-back-btn svg { width: 1vw; height: 0.63vw; stroke: currentColor; flex-shrink: 0; }\n  .ps-tryon-title { display: flex; align-items: center; }\n  .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }\n  .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }\n  .ps-tryon-header-icon {\n    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n    cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;\n  }\n  .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: 0.9vw; height: 0.9vw; }\n  .ps-tryon-close {\n    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;\n    background: none; border: none; color: var(--ps-modal-close-color, #999);\n    cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;\n  }\n  .ps-tryon-close:hover { background: rgba(0,0,0,0.06); }\n  .ps-tryon-close svg { width: 1vw; height: 1vw; }\n\n  /* Language switcher */\n  .ps-tryon-lang-wrap { position: relative; z-index: 99999; }\n  .ps-tryon-lang-trigger {\n    display: flex; align-items: center; gap: clamp(5px, 0.36vw, 6px);\n    padding: clamp(6px, 0.36vw, 8px) clamp(10px, 0.73vw, 12px);\n    border: 1.5px solid var(--ps-border-color); border-radius: clamp(8px, 0.57vw, 10px);\n    background: transparent; cursor: pointer; color: var(--ps-text-secondary);\n    transition: all 0.25s ease; font-family: inherit; white-space: nowrap;\n    min-height: 36px;\n  }\n  .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {\n    border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);\n  }\n  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; width: clamp(13px, 0.8vw, 14px); height: clamp(13px, 0.8vw, 14px); }\n  .ps-tryon-lang-current {\n    font-size: clamp(12px, 0.68vw, 13px); font-weight: 500; letter-spacing: 0.01em;\n  }\n  .ps-tryon-lang-arrow {\n    font-size: clamp(10px, 0.57vw, 11px); transition: transform 0.25s ease; display: inline-block;\n  }\n  .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }\n\n  /* Dropdown is portaled to document.body \u2014 uses hardcoded colors (no CSS vars available) */\n  .ps-tryon-lang-dropdown {\n    min-width: 13vw;\n    background: #FFFFFF; border: 1.5px solid rgba(0,0,0,0.1);\n    border-radius: 0.73vw;\n    box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.15),\n                0 0 0 1px rgba(0,0,0,0.03);\n    overflow: hidden;\n    animation: ps-lang-open 0.2s ease both;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  @keyframes ps-lang-open {\n    from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }\n    to { opacity: 1; transform: none; }\n  }\n\n  .ps-tryon-lang-list {\n    max-height: 18vw; overflow-y: auto; padding: 0.31vw;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;\n  }\n  .ps-tryon-lang-item {\n    display: flex; align-items: center; gap: 0.57vw;\n    width: 100%; padding: 0.57vw 0.83vw;\n    border: none; background: transparent; color: #555; cursor: pointer;\n    border-radius: 0.47vw; transition: all 0.15s ease;\n    font-family: inherit; text-align: left;\n  }\n  .ps-tryon-lang-item:hover { background: rgba(0,0,0,0.04); color: #1C1D1E; }\n  .ps-tryon-lang-item.ps-selected { background: rgba(59,130,246,0.1); color: #3B82F6; }\n  .ps-tryon-lang-name {\n    flex: 1; font-size: 0.73vw; font-weight: 500;\n  }\n  .ps-tryon-lang-code {\n    font-size: 0.52vw; color: #999; font-weight: 600;\n    letter-spacing: 0.05em; font-family: ui-monospace, monospace;\n  }\n  .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #3B82F6; opacity: 0.7; }\n  .ps-tryon-lang-check { color: #3B82F6; display: flex; align-items: center; }\n\n  /* Stepper */\n  /* Dots progress */\n  .ps-tryon-dots { display: none; }\n  .ps-tryon-dot { display: none; }\n\n  /* Body */\n  .ps-tryon-body { padding: 1.25vw; flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }\n  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(0.63vw); } to { opacity: 1; transform: translateY(0); } }\n  .ps-tryon-view-enter { animation: ps-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; flex: 1; display: flex; flex-direction: column; min-height: 0; will-change: transform, opacity; }\n\n  /* Welcome */\n  .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }\n  .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }\n  .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }\n  .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }\n  .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; background: var(--ps-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }\n  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.9vw; height: 0.9vw; }\n  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n  .ps-tryon-welcome-title { font-size: 1.4vw; font-weight: 700; color: var(--ps-text-primary); margin: 1vw 0 0.3vw; letter-spacing: -0.01em; }\n  .ps-tryon-welcome-sub { font-size: 0.9vw; color: var(--ps-text-secondary); margin: 0; }\n  .ps-tryon-features { display: flex; gap: 0.7vw; margin: 1.3vw 0; }\n  .ps-tryon-feature { flex: 1; padding: 1vw 0.7vw; border: 1px solid var(--ps-border-color); border-radius: 0.8vw; text-align: center; transition: border-color 0.2s; }\n  .ps-tryon-feature:hover { border-color: #555; }\n  .ps-tryon-feature-icon { margin-bottom: 0.4vw; color: var(--ps-accent); display: flex; justify-content: center; }\n  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: 1.2vw; height: 1.2vw; }\n  .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin-bottom: 2px; }\n  .ps-tryon-feature-desc { font-size: 0.7vw; color: var(--ps-text-secondary); }\n  .ps-tryon-cta {\n    width: 100%; padding: 1vw; background: var(--ps-accent); color: #fff; border: none;\n    border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;\n    display: flex; align-items: center; justify-content: center; gap: 0.5vw; transition: all 0.2s;\n    font-family: var(--ps-modal-font, system-ui, sans-serif);\n  }\n  .ps-tryon-cta:hover { background: var(--ps-accent-hover); transform: translateY(-1px); }\n  .ps-tryon-cta svg { stroke: #111; }\n  .ps-tryon-welcome-note { font-size: 0.7vw; color: var(--ps-text-muted); margin-top: 0.7vw; }\n\n  /* Upload */\n  .ps-tryon-upload {\n    border: 2px dashed var(--ps-upload-border, var(--ps-border-color)); border-radius: 0.63vw;\n    padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;\n    background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;\n  }\n  .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.05); }\n  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, var(--ps-accent)); margin-bottom: 0.63vw; }\n  .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, var(--ps-text-primary)); margin: 0 0 0.21vw; }\n  .ps-tryon-upload-hint { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n  .ps-tryon-preview {\n    position: relative; margin-bottom: 0.21vw;\n    height: 20vw; border-radius: 0.63vw;\n    overflow: hidden; background: var(--ps-bg-tertiary);\n  }\n  .ps-tryon-preview-blur {\n    position: absolute; inset: -20px; background-size: cover; background-position: center;\n    filter: blur(25px) brightness(0.4); transform: scale(1.2);\n  }\n  .ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }\n  .ps-tryon-preview-remove {\n    position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;\n    border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;\n    cursor: pointer; display: flex; align-items: center; justify-content: center;\n    font-size: 0.83vw; transition: background 0.15s;\n  }\n  .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }\n  .ps-tryon-submit {\n    width: 100%; padding: 0.73vw; margin-top: 0.83vw;\n    background: var(--ps-modal-primary-bg, var(--ps-accent)); color: var(--ps-modal-primary-color, #111);\n    font-family: var(--ps-modal-font, system-ui, sans-serif);\n    font-size: 0.73vw; font-weight: 600; border: none;\n    border-radius: var(--ps-modal-primary-radius, 0.52vw);\n    cursor: pointer; transition: all 0.2s;\n    display: flex; align-items: center; justify-content: center; gap: 0.42vw;\n  }\n  .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }\n  .ps-tryon-submit svg { stroke: currentColor; }\n\n  /* Profile bar */\n  .ps-tryon-profile-bar { margin-bottom: 0.83vw; }\n  .ps-tryon-profile-select {\n    width: 100%; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n    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\");\n    background-repeat: no-repeat; background-position: right 0.73vw center;\n  }\n  .ps-tryon-profile-select:focus { border-color: var(--ps-accent); }\n\n  /* Sizing \u2014 split layout (product image left, form right) */\n  .ps-tryon-sizing-split {\n    display: flex; gap: 1.8vw;\n    flex: 1; min-height: 0; position: relative;\n    height: 30vw;\n  }\n  .ps-tryon-sizing-img-col {\n    flex: 1.15; position: relative;\n    background: transparent;\n    border-radius: 0.8vw; overflow: hidden;\n  }\n  .ps-tryon-sizing-img-col > img, .ps-tryon-sizing-img-col > .ps-tryon-sizing-measure-img {\n    display: block; width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    background: transparent;\n    border-radius: 1vw;\n    transition: opacity 0.3s ease;\n  }\n  .ps-tryon-sizing-product-img { opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }\n  .ps-tryon-sizing-product-img.ps-tryon-img-hidden { opacity: 0.08; }\n  .ps-tryon-sizing-measure-img { position: absolute; inset: 0; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n  .ps-tryon-sizing-measure-img.ps-tryon-img-visible { opacity: 1; }\n  .ps-tryon-sizing-height-img { position: absolute; inset: 0; object-fit: contain !important; background: #f5f5f5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }\n  .ps-tryon-sizing-height-img.ps-tryon-img-visible { opacity: 1; }\n\n  /* Model overlay \u2014 positioned on top of the image column */\n  .ps-tryon-model-overlay {\n    grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity 0.5s ease;\n    width: 100%; aspect-ratio: 896 / 1200; overflow: hidden;\n  }\n  .ps-tryon-model-overlay.ps-tryon-img-visible { opacity: 1; }\n  .ps-tryon-model-raw { width: 100%; height: 100%; object-fit: contain; }\n\n  /* Measurement overlay group \u2014 each measurement is one group */\n  .ps-tryon-mline-group { position: absolute; inset: 0; pointer-events: none; }\n\n  /* Horizontal dashed line */\n  .ps-tryon-mline-h {\n    position: absolute; height: 0;\n    border-top: 2.5px dashed var(--ps-border-color);\n    animation: ps-dash-draw 0.5s ease 0.1s both;\n  }\n  /* Vertical dashed line (inseam, sleeve) */\n  .ps-tryon-mline-v {\n    position: absolute; width: 0;\n    border-left: 2.5px dashed var(--ps-border-color);\n    animation: ps-vdash-draw 0.5s ease 0.1s both;\n  }\n  /* Tick marks at line endpoints \u2014 vertical ticks for horizontal lines */\n  .ps-tryon-mline-tick {\n    position: absolute; width: 0;\n    border-left: 2.5px solid var(--ps-border-color);\n    animation: ps-label-pop 0.3s ease 0.2s both;\n  }\n  /* Horizontal ticks for vertical lines */\n  .ps-tryon-mline-htick {\n    position: absolute; height: 0;\n    border-top: 2.5px solid var(--ps-border-color);\n    animation: ps-label-pop 0.3s ease 0.2s both;\n  }\n\n  /* Label box \u2014 matches reference: black title box + left-bordered description */\n  .ps-tryon-mline-label {\n    position: absolute;\n    animation: ps-label-pop 0.35s ease 0.25s both;\n    max-width: 33%;\n  }\n  .ps-tryon-mline-title {\n    display: inline-block; background: #222; color: var(--ps-text-primary);\n    font-size: 0.55vw; font-weight: 800; letter-spacing: 0.06em;\n    padding: 0.12vw 0.35vw; margin-bottom: 0.2vw;\n  }\n  .ps-tryon-mline-desc {\n    font-size: 0.42vw; color: #444; line-height: 1.4;\n    font-style: italic;\n    border-left: 1.5px solid var(--ps-border-color); padding-left: 0.3vw;\n    margin-top: 0.1vw;\n  }\n\n  /* Per-field measurement guide overlay */\n  .ps-tryon-measure-overlay {\n    position: absolute; inset: 0; z-index: 5; pointer-events: none;\n    animation: ps-measure-in 0.3s ease both;\n  }\n  .ps-tryon-measure-dot {\n    position: absolute; width: 0.55vw; height: 0.55vw;\n    background: #222;\n    border: 2px solid var(--ps-border-color);\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);\n    animation: ps-dot-pulse 1.5s ease-in-out infinite;\n    z-index: 6;\n  }\n  .ps-tryon-measure-callout {\n    position: absolute; top: 3%; left: 4%; z-index: 7;\n    animation: ps-label-pop 0.35s ease 0.15s both;\n    max-width: 55%;\n  }\n  .ps-tryon-measure-title {\n    display: inline-block; background: #222; color: var(--ps-text-primary);\n    font-size: 1.1vw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;\n    padding: 0.3vw 0.65vw; margin-bottom: 0.35vw;\n  }\n  .ps-tryon-measure-desc {\n    font-size: 0.85vw; color: #222; line-height: 1.55;\n    font-style: italic; font-weight: 500;\n    border-left: 2.5px solid var(--ps-border-color); padding-left: 0.55vw;\n    margin-top: 0.15vw;\n  }\n  @keyframes ps-dot-pulse {\n    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }\n    50% { box-shadow: 0 0 0 5px rgba(0,0,0,0.06); }\n  }\n\n  @keyframes ps-measure-in {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ps-dash-draw {\n    from { clip-path: inset(0 100% 0 0); }\n    to { clip-path: inset(0 0 0 0); }\n  }\n  @keyframes ps-vdash-draw {\n    from { clip-path: inset(0 0 100% 0); }\n    to { clip-path: inset(0 0 0 0); }\n  }\n  @keyframes ps-label-pop {\n    from { opacity: 0; transform: scale(0.9); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 V2 Redesign \u2014 Editorial luxury \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-tryon-v2 {\n    display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n    height: 28vw; overflow: hidden;\n  }\n\n  /* Left image column \u2014 proper contained display */\n  .ps-tryon-v2-bg {\n    flex: 0 0 43%; position: relative; min-width: 0;\n    background: var(--ps-bg-secondary);\n    border-radius: 0.9vw; overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .ps-tryon-v2-bg-img {\n    width: 100%; height: 100%; object-fit: contain; object-position: center center;\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-v2-bg-img.ps-tryon-img-hidden { opacity: 0.06; }\n  .ps-tryon-v2-guide {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    opacity: 0; z-index: 1;\n    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: opacity;\n  }\n  .ps-tryon-v2-guide.ps-visible { opacity: 1; }\n\n  /* Right form panel */\n  .ps-tryon-v2-panel {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column;\n    padding: 0.2vw 0;\n    justify-content: center;\n    animation: ps-v2-fade 0.3s ease forwards;\n  }\n  @keyframes ps-v2-fade {\n    0% { opacity: 0; transform: translateY(0.4vw); }\n    100% { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ps-panel-slide {\n    from { transform: translateX(2vw); opacity: 0; }\n    to { transform: translateX(0); opacity: 1; }\n  }\n\n  /* Top bar */\n  .ps-tryon-v2-top {\n    display: flex; align-items: center; justify-content: space-between;\n    margin-bottom: 0.6vw;\n  }\n  .ps-tryon-v2-title {\n    font-size: 1.2vw; font-weight: 300; color: var(--ps-text-primary);\n    letter-spacing: 0.2em; text-transform: uppercase; margin: 0;\n    font-family: inherit;\n  }\n  .ps-tryon-v2-subtitle {\n    font-size: 0.65vw; font-weight: 400; color: rgba(0,0,0,0.25);\n    margin: 0.15vw 0 0; letter-spacing: 0.03em;\n  }\n  .ps-tryon-v2-unit-toggle {\n    display: flex; gap: 0;\n    border: 1px solid rgba(0,0,0,0.06); border-radius: 2vw; overflow: hidden;\n  }\n  .ps-tryon-v2-unit {\n    background: none; border: none; padding: 0.22vw 0.7vw;\n    font-size: 0.55vw; font-weight: 700; color: rgba(0,0,0,0.2);\n    cursor: pointer; font-family: inherit; letter-spacing: 0.1em;\n    transition: all 0.25s;\n  }\n  .ps-tryon-v2-unit.ps-on {\n    background: rgba(33,84,239,0.15); color: var(--ps-accent);\n  }\n\n  /* Body type card selector */\n  .ps-tryon-bodytype-cards {\n    display: flex; gap: 0.35vw; width: 100%;\n    overflow-x: auto; padding: 0.15vw 0;\n    scrollbar-width: none;\n  }\n  .ps-tryon-bodytype-cards::-webkit-scrollbar { display: none; }\n  .ps-tryon-bodytype-card {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.2vw; padding: 0.4vw 0.2vw;\n    border: 1.5px solid rgba(0,0,0,0.06); border-radius: 0.35vw;\n    background: transparent; color: rgba(0,0,0,0.3);\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-bodytype-card:hover {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.06);\n  }\n  .ps-tryon-bodytype-card.ps-active {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.12);\n    color: var(--ps-accent);\n  }\n  .ps-tryon-bodytype-label {\n    font-size: 0.5vw; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;\n  }\n\n  /* Separator */\n  .ps-tryon-v2-sep {\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(33,84,239,0.2), transparent);\n    margin-bottom: 0.8vw;\n  }\n\n  /* Profile select */\n  .ps-tryon-v2-profile {\n    width: 100%; padding: 0.3vw 0.5vw; margin-bottom: 0.6vw;\n    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);\n    border-radius: 0.3vw; color: rgba(0,0,0,0.08);\n    font-size: 0.6vw; font-family: inherit; cursor: pointer; outline: none;\n    appearance: none; -webkit-appearance: none;\n    transition: border-color 0.2s;\n  }\n  .ps-tryon-v2-profile:focus { border-color: rgba(33,84,239,0.3); }\n\n  /* Fields container \u2014 scrollable */\n  .ps-tryon-v2-fields {\n    flex: 1; min-height: 0; overflow-y: auto;\n    display: flex; flex-direction: column; gap: 0;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n  }\n\n  /* Override float-row for inline look inside v2 */\n  .ps-tryon-v2-fields .ps-tryon-sf-float-row {\n    width: 100%;\n  }\n  /* Label inline with input line */\n  .ps-tryon-v2-fields .ps-tryon-sf-float-field {\n    display: flex; align-items: center; gap: 0.8vw;\n    width: 100%; padding: 0.9vw 0.8vw;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-float-label {\n    flex-shrink: 0;\n    font-size: 0.75vw; font-weight: 500;\n    color: rgba(0,0,0,0.08);\n    letter-spacing: 0.04em;\n    margin: 0; white-space: nowrap;\n    transition: color 0.25s;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n    color: var(--ps-accent);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input {\n    flex: 1; border: none;\n    border-bottom: 1.5px solid rgba(0,0,0,0.1);\n    background: none; padding: 0.25vw 0;\n    font-size: 1vw; font-weight: 400; color: var(--ps-text-primary);\n    font-family: inherit; outline: none;\n    -moz-appearance: textfield;\n    transition: border-color 0.3s;\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input:focus {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input::placeholder {\n    color: rgba(0,0,0,0.08);\n  }\n  .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-outer-spin-button,\n  .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n  /* CTA button */\n  .ps-tryon-v2-cta {\n    margin-top: 0.8vw; padding: 0.65vw 1.5vw;\n    width: auto; min-width: 12vw; display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n    background: var(--ps-accent); color: #fff;\n    border: none; border-radius: 0.35vw;\n    font-size: 0.72vw; font-weight: 700; font-family: inherit;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    flex-shrink: 0;\n  }\n  .ps-tryon-v2-cta svg { width: 0.75vw; height: 0.75vw; }\n  .ps-tryon-v2-cta:hover {\n    background: var(--ps-accent-hover);\n    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n    transform: translateY(-1px);\n  }\n  .ps-tryon-v2-cta svg { width: 0.8vw; height: 0.8vw; stroke: currentColor; }\n\n  /* \u2500\u2500 Size result card rows (split layout) \u2500\u2500 */\n  .ps-tryon-sr-cards-stack {\n    display: flex; flex-wrap: wrap; gap: 0.4vw;\n    flex: 1; min-height: 0; justify-content: center;\n  }\n  /* Cards inside stack: 2 per row, compact, dark */\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard {\n    flex: 1 1 45%; max-width: 49%; min-height: 0; border-radius: 0.5vw;\n    background: #0a0a0a; max-height: 8vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard:not(.ps-has-img) {\n    min-height: 5vw; padding: 0.4vw; max-height: 8vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-bg {\n    max-height: 8vw; width: 100%;\n    object-fit: cover; object-position: center top;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-overlay {\n    height: 100%;\n    background: rgba(0,0,0,0.6);\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-content {\n    padding: 0.4vw;\n  }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-name { font-size: 0.5vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-size { font-size: 1.2vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-badge { font-size: 0.35vw; }\n  .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-icon { width: 1.8vw; height: 1.8vw; }\n  .ps-tryon-sr-card-row {\n    display: flex; align-items: center; gap: 0.6vw;\n    padding: 0.6vw 0.7vw;\n    background: rgba(255,255,255,0.02);\n    border: 1px solid rgba(0,0,0,0.04);\n    border-radius: 0.5vw;\n    cursor: pointer; font-family: inherit;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0;\n  }\n  .ps-tryon-sr-card-row:nth-child(1) { animation-delay: 0s; }\n  .ps-tryon-sr-card-row:nth-child(2) { animation-delay: 0.06s; }\n  .ps-tryon-sr-card-row:nth-child(3) { animation-delay: 0.12s; }\n  .ps-tryon-sr-card-row:nth-child(4) { animation-delay: 0.18s; }\n  .ps-tryon-sr-card-row:hover {\n    border-color: var(--ps-accent);\n    background: rgba(33,84,239,0.04);\n    transform: translateX(0.15vw);\n  }\n  .ps-tryon-sr-card-icon {\n    width: 2vw; height: 2vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.1);\n    border-radius: 50%; color: var(--ps-accent);\n  }\n  .ps-tryon-sr-card-icon svg { stroke: currentColor; }\n  .ps-tryon-sr-card-info {\n    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05vw;\n  }\n  .ps-tryon-sr-card-name {\n    font-size: 0.72vw; font-weight: 500; color: var(--ps-text-primary);\n    text-transform: capitalize;\n  }\n  .ps-tryon-sr-card-fit {\n    font-size: 0.55vw; color: var(--ps-text-muted); letter-spacing: 0.03em;\n  }\n  .ps-tryon-sr-card-size {\n    font-size: 1.3vw; font-weight: 300; color: var(--ps-accent);\n    letter-spacing: -0.01em;\n  }\n  .ps-tryon-sr-card-row > svg { color: rgba(0,0,0,0.1); flex-shrink: 0; transition: color 0.2s; }\n  .ps-tryon-sr-card-row:hover > svg { color: var(--ps-accent); }\n\n  /* \u2500\u2500 Result cards v2: bold, clear, unmissable \u2500\u2500 */\n  .ps-tryon-sr-cards-v2 {\n    display: flex; flex-wrap: wrap; gap: 0.4vw;\n    flex: 1; min-height: 0;\n  }\n  .ps-tryon-sr-card-v2 {\n    flex: 1 1 45%; max-width: 49%;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    text-align: center;\n    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 0.6vw; padding: 1vw 0.5vw;\n    cursor: pointer; font-family: inherit;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ps-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0; overflow: hidden;\n    min-height: 7vw;\n  }\n  .ps-tryon-sr-card-v2.ps-full { flex: 1 1 100%; max-width: 100%; min-height: 5vw; padding: 0.8vw; }\n  .ps-tryon-sr-card-v2:hover {\n    border-color: var(--ps-accent);\n    background: rgba(33,84,239,0.06);\n    transform: translateY(-2px);\n    box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.08);\n  }\n  .ps-tryon-sr-card-v2-text {\n    display: flex; flex-direction: column; align-items: center; gap: 0.15vw; z-index: 1;\n  }\n  .ps-tryon-sr-card-v2-label {\n    font-size: 0.65vw; font-weight: 600; color: var(--ps-text-secondary);\n    text-transform: uppercase; letter-spacing: 0.1em;\n  }\n  .ps-tryon-sr-card-v2-value {\n    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n    line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }\n  .ps-tryon-sr-card-v2-rec {\n    font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n    text-transform: uppercase; letter-spacing: 0.1em;\n    margin-top: 0.15vw;\n    border: 1px solid rgba(33,84,239,0.25); border-radius: 2vw;\n    padding: 0.1vw 0.5vw;\n  }\n  .ps-tryon-sr-card-v2-img { display: none; }\n  .ps-tryon-sr-card-v2-icon { display: none; }\n\n  /* \u2500\u2500 Photo guide v2 \u2500\u2500 */\n  .ps-tryon-guide-drop-v2 {\n    width: 90%; height: 90%; border-radius: 0.6vw;\n    border: 1.5px dashed rgba(0,0,0,0.08);\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.3vw; cursor: pointer; transition: all 0.25s;\n    position: relative; overflow: hidden;\n  }\n  .ps-tryon-guide-drop-v2:hover, .ps-tryon-guide-drop-v2.ps-drag {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n  }\n  .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(0,0,0,0.06); cursor: default; }\n  .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }\n  .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(0,0,0,0.5); }\n  .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(0,0,0,0.15); }\n  .ps-tryon-guide-drop-v2-img {\n    width: 100%; height: 100%; object-fit: contain; border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-drop-v2-remove {\n    position: absolute; top: 0.4vw; right: 0.4vw;\n    width: 1.4vw; height: 1.4vw; border-radius: 50%;\n    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);\n    color: var(--ps-text-muted); font-size: 0.6vw; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.2s;\n  }\n  .ps-tryon-guide-drop-v2-remove:hover { background: rgba(239,68,68,0.7); }\n\n  .ps-tryon-guide-v2-tips {\n    display: flex; flex-direction: column; gap: 0.4vw;\n    margin: 0.5vw 0;\n  }\n  .ps-tryon-guide-v2-tip {\n    display: flex; align-items: center; gap: 0.4vw;\n    font-size: 0.65vw; color: rgba(0,0,0,0.5);\n  }\n  .ps-tryon-guide-v2-tip-icon {\n    width: 1.2vw; height: 1.2vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 0.55vw; border-radius: 50%;\n    background: rgba(74,222,128,0.1); color: #4ade80;\n  }\n  .ps-tryon-guide-v2-tip.ps-dont .ps-tryon-guide-v2-tip-icon {\n    background: rgba(239,68,68,0.1); color: #f87171;\n  }\n  .ps-tryon-v2-cta:disabled {\n    opacity: 0.4; cursor: not-allowed; transform: none;\n    box-shadow: none;\n  }\n\n  /* Try-on processing overlay on image */\n  .ps-tryon-v2-bg-img.ps-tryon-blur {\n    filter: blur(8px) brightness(0.5); transform: scale(1.05);\n    transition: filter 0.5s ease, transform 0.5s ease;\n  }\n  .ps-tryon-v2-processing-label {\n    position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);\n    z-index: 5; font-size: 0.65vw; font-weight: 500;\n    color: var(--ps-accent); letter-spacing: 0.06em;\n    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);\n    padding: 0.25vw 0.8vw; border-radius: 2vw;\n    animation: ps-loading-pulse 2s ease-in-out infinite;\n  }\n\n  /* \"I don't know\" link */\n  .ps-tryon-v2-dontknow {\n    background: none; border: none;\n    color: var(--ps-accent); font-size: 0.72vw; font-weight: 500;\n    cursor: pointer; font-family: inherit;\n    padding: 0.5vw 0.8vw; text-align: left;\n    transition: color 0.2s;\n  }\n  .ps-tryon-v2-dontknow:hover { color: var(--ps-accent-light); text-decoration: underline; }\n\n  /* Alternative links */\n  .ps-tryon-v2-alt {\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n    margin-top: 0.5vw; flex-shrink: 0;\n  }\n  .ps-tryon-v2-alt button {\n    background: none; border: none; color: rgba(33,84,239,0.5);\n    font-size: 0.58vw; font-weight: 500; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.04em;\n    transition: color 0.2s; padding: 0;\n  }\n  .ps-tryon-v2-alt button:hover { color: var(--ps-accent); }\n  .ps-tryon-v2-alt span { color: rgba(0,0,0,0.06); font-size: 0.55vw; }\n\n  /* Active field row highlight (legacy) */\n  .ps-tryon-sf-row-active { border-bottom-color: var(--ps-accent); }\n  .ps-tryon-sf-row-active .ps-tryon-sf-label { color: var(--ps-accent); }\n  .ps-tryon-sizing-form-col {\n    flex: 1; display: flex; flex-direction: column; justify-content: flex-start;\n    padding: 0.3vw 0; min-height: 0;\n  }\n  .ps-tryon-sf-title {\n    font-size: 1.1vw; font-weight: 300; color: var(--ps-text-primary);\n    margin: 0 0 0.8vw; letter-spacing: 0.12em; text-transform: uppercase;\n    text-align: left;\n    background: linear-gradient(90deg, #fff 0%, rgba(0,0,0,0.5) 100%);\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n  .ps-tryon-sf-unit-tabs {\n    display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 0.3vw; overflow: hidden; margin-bottom: 1vw; align-self: flex-start;\n  }\n  .ps-tryon-sf-unit-tab {\n    background: none; border: none; padding: 0.3vw 0.9vw;\n    font-size: 0.62vw; font-weight: 600; color: rgba(0,0,0,0.25); cursor: pointer;\n    font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;\n  }\n  .ps-tryon-sf-unit-tab:hover { color: rgba(0,0,0,0.5); }\n  .ps-tryon-sf-unit-tab.ps-active { color: var(--ps-accent); background: rgba(33,84,239,0.08); }\n\n  .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }\n  .ps-tryon-sf-profile-select {\n    width: 100%; padding: 0.4vw; background: var(--ps-bg-secondary); color: var(--ps-text-secondary);\n    border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n    font-size: 0.75vw; font-family: inherit; cursor: pointer;\n  }\n\n  .ps-tryon-sf-scroll {\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-sf-fields {\n    display: flex; flex-direction: column; gap: 0.8vw;\n  }\n  .ps-tryon-sf-footer {\n    flex-shrink: 0; padding-top: 0.6vw;\n    display: flex; flex-direction: column; gap: 0.4vw;\n  }\n\n  /* \u2500\u2500 Refined line inputs \u2500\u2500 */\n  .ps-tryon-sf-float-row {\n    width: 100%;\n  }\n  .ps-tryon-sf-float-field {\n    width: 100%; position: relative;\n  }\n\n  /* Label \u2014 subtle, editorial */\n  .ps-tryon-sf-float-label {\n    display: block;\n    font-size: 0.58vw; font-weight: 500; color: var(--ps-text-secondary);\n    letter-spacing: 0.1em; text-transform: uppercase;\n    margin-bottom: 0.15vw;\n    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label {\n    color: var(--ps-accent);\n  }\n\n  /* Input \u2014 elegant underline */\n  .ps-tryon-sf-input {\n    width: 100%; box-sizing: border-box;\n    background: none; border: none;\n    border-bottom: 1.5px solid rgba(0,0,0,0.15);\n    color: var(--ps-text-primary);\n    font-size: 0.85vw; font-weight: 300; font-family: inherit;\n    padding: 0.4vw 0; letter-spacing: 0.02em;\n    outline: none;\n    -moz-appearance: textfield;\n    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ps-tryon-sf-input:focus {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-sf-input:not(:placeholder-shown) {\n    border-bottom-color: rgba(0,0,0,0.1);\n  }\n  .ps-tryon-sf-input:focus:not(:placeholder-shown) {\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-tryon-sf-input::placeholder { color: rgba(0,0,0,0.08); }\n  .ps-tryon-sf-input::-webkit-outer-spin-button,\n  .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n\n  .ps-tryon-sf-ft-group {\n    display: flex; align-items: stretch; gap: 1vw; width: 100%;\n  }\n  .ps-tryon-sf-ft-group .ps-tryon-sf-float-field { flex: 1; }\n\n  /* Legacy (keep for skeleton/review) */\n  .ps-tryon-sf-row {\n    display: flex; align-items: center; justify-content: center; gap: 1.2vw;\n    padding: 1.3vw 0; max-width: 100%; margin: 0 auto;\n  }\n  .ps-tryon-sf-label {\n    font-size: 0.78vw; font-weight: 700; color: var(--ps-text-secondary);\n    letter-spacing: 0.1em; text-transform: uppercase;\n    flex-shrink: 0; min-width: 5vw;\n  }\n  .ps-tryon-sf-input-wrap { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n  .ps-tryon-sf-inline { flex: 1; display: flex; align-items: center; gap: 0.4vw; }\n  .ps-tryon-sf-unit {\n    font-size: 0.73vw; color: var(--ps-text-secondary); font-weight: 500; flex-shrink: 0;\n  }\n\n  .ps-tryon-sf-optional { border-top: 1px solid var(--ps-border-color); margin-top: 0.52vw; padding-top: 0.52vw; }\n  .ps-tryon-sf-optional-toggle {\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; padding: 0.52vw 0.73vw;\n    font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); cursor: pointer;\n    font-family: inherit;\n    border: 1px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: #161616; transition: all 0.2s;\n  }\n  .ps-tryon-sf-optional-toggle:hover { border-color: #555; background: #1a1a1a; }\n  .ps-tryon-sf-optional-arrow {\n    font-size: 0.83vw; color: var(--ps-text-secondary); transition: transform 0.3s ease; display: inline-block;\n  }\n  .ps-tryon-sf-optional-arrow.ps-open { transform: rotate(180deg); }\n  .ps-tryon-sf-optional-fields {\n    display: flex; flex-direction: column; gap: 0.8vw;\n    max-height: 0; overflow: hidden; opacity: 0;\n    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;\n    padding-top: 0;\n  }\n  .ps-tryon-sf-optional-fields.ps-open {\n    max-height: 30vw; opacity: 1; padding-top: 0.7vw;\n  }\n\n  /* Mode switch \u2014 below button */\n  .ps-tryon-sf-mode-switch { margin-top: 0.5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25vw; }\n  .ps-tryon-sf-switch-btn {\n    background: none; border: none; color: rgba(33,84,239,0.7); font-size: 0.65vw;\n    font-weight: 500; cursor: pointer; font-family: inherit;\n    display: inline-flex; align-items: center; gap: 0.2vw;\n    transition: color 0.25s; padding: 0.15vw 0; letter-spacing: 0.03em;\n  }\n  .ps-tryon-sf-switch-btn:hover { color: var(--ps-accent); }\n  .ps-tryon-sf-switch-divider { color: rgba(0,0,0,0.08); font-size: 0.65vw; font-weight: 300; }\n  .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }\n\n  /* How to measure \u2014 overlaid on product image bottom-left */\n  .ps-tryon-sf-measure-overlay {\n    position: absolute; bottom: 0.6vw; left: 0.6vw;\n    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);\n    border: 1px solid var(--ps-border-color); color: var(--ps-text-secondary); font-size: 0.75vw;\n    font-weight: 500; cursor: pointer; font-family: inherit;\n    display: inline-flex; align-items: center; gap: 0.35vw;\n    padding: 0.4vw 0.8vw; border-radius: 0.45vw; transition: all 0.2s;\n  }\n  .ps-tryon-sf-measure-overlay:hover { border-color: var(--ps-accent); color: var(--ps-text-primary); }\n  .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.15); }\n  .ps-tryon-sf-measure-overlay svg { stroke: currentColor; }\n\n  /* Estimation review view */\n  .ps-tryon-est-subtitle {\n    font-size: 0.7vw; color: var(--ps-text-dim); margin: 0 0 0.8vw; line-height: 1.5; text-align: center;\n  }\n  .ps-tryon-est-label-group {\n    display: flex; flex-direction: column; gap: 0.1vw; flex-shrink: 0; min-width: 5vw;\n  }\n  .ps-tryon-sf-estimated-badge {\n    display: inline-block; font-size: 0.45vw; padding: 0.08vw 0.25vw;\n    border-radius: 0.2vw; background: rgba(33,84,239,0.15); color: var(--ps-accent);\n    letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; width: fit-content;\n  }\n  .ps-tryon-sf-edit-icon {\n    width: 0.85vw; height: 0.85vw; stroke: #555; flex-shrink: 0; cursor: pointer;\n    transition: stroke 0.2s;\n  }\n  .ps-tryon-sf-edit-icon:hover { stroke: var(--ps-accent); }\n  .ps-tryon-est-actions {\n    display: flex; align-items: center; gap: 0.8vw; margin-top: 0.6vw;\n  }\n  .ps-tryon-est-back {\n    background: none; border: none; color: var(--ps-text-dim); cursor: pointer; font-size: 0.75vw;\n    font-family: inherit; padding: 0; transition: color 0.2s; flex-shrink: 0; white-space: nowrap;\n  }\n  .ps-tryon-est-back:hover { color: var(--ps-accent); }\n  .ps-tryon-est-submit { flex: 1; min-width: 0; }\n\n  /* Save profile */\n  .ps-tryon-sf-save { margin-top: 0.42vw; display: flex; flex-direction: column; gap: 0.36vw; }\n  .ps-tryon-sf-save-check {\n    display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n  }\n  .ps-tryon-sf-save-check input[type=\"checkbox\"] { width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer; }\n  .ps-tryon-sf-save-name {\n    padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw;\n    background: #111; color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s; animation: ps-fade-up 0.2s ease both;\n  }\n  .ps-tryon-sf-save-name:focus { border-color: var(--ps-accent); }\n\n  .ps-tryon-sf-error {\n    color: var(--ps-error-color); font-size: 0.75vw; text-align: center; margin-top: 0.3vw;\n  }\n  .ps-tryon-sf-next {\n    margin-top: 0.6vw; padding: 0.65vw 2vw;\n    width: 100%;\n    background: linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-light) 100%);\n    color: #0c0c0c; border: none;\n    border-radius: 0.4vw; font-size: 0.78vw;\n    font-weight: 600; cursor: pointer; font-family: inherit;\n    flex-shrink: 0; letter-spacing: 0.06em; text-transform: uppercase;\n    transition: background 0.2s ease, opacity 0.2s ease;\n    box-shadow: 0 0.2vw 1vw rgba(33,84,239,0.15);\n    display: inline-flex; align-items: center; gap: 0.35vw;\n  }\n  .ps-tryon-sf-next:hover { background: var(--ps-accent-hover); }\n  .ps-tryon-sf-next svg { width: 0.85vw; height: 0.85vw; stroke: currentColor; fill: none; }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Height Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-hpk {\n    display: flex; flex-direction: column; align-items: center;\n    height: 100%; min-height: 26vw;\n  }\n  .ps-hpk-title {\n    font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n  }\n  .ps-hpk-desc {\n    font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n  }\n\n  /* Shared toggle */\n  .ps-hpk-toggle {\n    display: inline-flex; border: 1.5px solid var(--ps-border-color); border-radius: 2vw; overflow: hidden;\n    margin-bottom: 0.3vw;\n  }\n  .ps-hpk-toggle button {\n    background: transparent; border: none; color: var(--ps-text-dim); font-size: 0.72vw; font-weight: 600;\n    padding: 0.3vw 1.4vw; cursor: pointer; font-family: inherit; transition: all 0.15s;\n  }\n  .ps-hpk-toggle button.ps-on {\n    background: var(--ps-accent); color: #fff; border-radius: 2vw;\n  }\n\n  /* Main visual area */\n  .ps-hpk-area {\n    position: relative; width: 100%; flex: 1; min-height: 18vw;\n    cursor: ns-resize; touch-action: none; user-select: none;\n    display: flex; align-items: flex-end; justify-content: center;\n  }\n\n  /* Value \u2014 positioned left, floats at indicator height */\n  .ps-hpk-val {\n    position: absolute; left: 0.5vw; transform: translateY(50%);\n    display: flex; align-items: baseline; gap: 0.2vw; z-index: 4;\n    pointer-events: none;\n  }\n  .ps-hpk-num {\n    font-size: 2vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n  }\n  .ps-hpk-unit {\n    font-size: 0.85vw; color: var(--ps-text-secondary); font-weight: 500;\n  }\n\n  /* Model \u2014 center */\n  .ps-hpk-model {\n    display: flex; align-items: flex-end; justify-content: center;\n    transition: height 0.1s ease-out; flex-shrink: 0;\n    position: relative; z-index: 1;\n  }\n  .ps-hpk-model img {\n    height: 100%; width: auto; max-width: 10vw; object-fit: contain;\n    opacity: 0.7;\n    border-radius: 0.4vw;\n  }\n\n  /* Ruler \u2014 right side */\n  .ps-hpk-ruler {\n    position: absolute; right: 0.5vw; top: 0; bottom: 0;\n    width: 4vw; z-index: 2;\n  }\n  .ps-hpk-ruler-line {\n    position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: #666;\n  }\n  .ps-hpk-mark {\n    position: absolute; left: 0; display: flex; align-items: center;\n    transform: translateY(50%);\n  }\n  .ps-hpk-mark-tick {\n    width: 0.8vw; height: 1.5px; background: #aaa;\n  }\n  .ps-hpk-mark-label {\n    margin-left: 0.35vw; font-size: 0.75vw; color: var(--ps-text-secondary); font-weight: 600;\n    white-space: nowrap;\n  }\n  .ps-hpk-mark-sm {\n    position: absolute; left: 0; width: 0.45vw; height: 1px; background: #555;\n    transform: translateY(50%);\n  }\n\n  /* Horizontal indicator line \u2014 spans full width */\n  .ps-hpk-line {\n    position: absolute; left: 0; right: 0; height: 2px;\n    background: rgba(33,84,239,0.5); z-index: 3;\n    transform: translateY(50%); pointer-events: none;\n    box-shadow: 0 0 8px rgba(33,84,239,0.3);\n  }\n  .ps-hpk-line::before {\n    content: ''; position: absolute; left: 50%; top: 50%;\n    transform: translate(-50%, -50%);\n    width: 10px; height: 10px; border-radius: 50%;\n    border: 2px solid var(--ps-accent); background: var(--ps-bg-secondary);\n    box-shadow: 0 0 8px rgba(33,84,239,0.6);\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Weight Picker \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-wpk {\n    display: flex; flex-direction: column; align-items: center;\n    height: 100%; justify-content: center; gap: 0.4vw;\n  }\n  .ps-wpk-title {\n    font-size: 1.2vw; font-weight: 700; color: var(--ps-text-primary); margin: 0 0 0.2vw;\n  }\n  .ps-wpk-desc {\n    font-size: 0.65vw; color: var(--ps-text-dim); margin: 0 0 0.5vw;\n  }\n  .ps-wpk-val {\n    display: flex; align-items: baseline; gap: 0.3vw; margin: 1.5vw 0 1vw;\n  }\n  .ps-wpk-num {\n    font-size: 2.8vw; font-weight: 800; color: var(--ps-text-primary); letter-spacing: -0.02em;\n  }\n  .ps-wpk-unit {\n    font-size: 1vw; color: var(--ps-text-dim); font-weight: 500;\n  }\n\n  /* Scale */\n  .ps-wpk-scale-wrap { width: 100%; padding: 0 1vw; }\n  .ps-wpk-track {\n    position: relative; width: 100%; height: 3.5vw;\n    cursor: ew-resize; touch-action: none; user-select: none;\n    border-bottom: 1.5px solid var(--ps-border-color);\n  }\n  .ps-wpk-tick {\n    position: absolute; bottom: 0; width: 1px; height: 0.6vw; background: #444;\n  }\n  .ps-wpk-tick.ps-md { height: 1.1vw; background: #666; }\n  .ps-wpk-tick.ps-mj { height: 1.8vw; background: #aaa; }\n\n  .ps-wpk-indicator {\n    position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 3;\n    display: flex; flex-direction: column; align-items: center; pointer-events: none;\n  }\n  .ps-wpk-ind-line { flex: 1; width: 2px; background: var(--ps-accent); }\n  .ps-wpk-ind-dot {\n    width: 10px; height: 10px; border-radius: 50%;\n    background: var(--ps-accent); border: 2px solid var(--ps-accent); flex-shrink: 0;\n    box-shadow: 0 0 8px rgba(33,84,239,0.7);\n  }\n\n  .ps-wpk-labels {\n    position: relative; width: 100%; height: 1.4vw; margin-top: 0.3vw;\n  }\n  .ps-wpk-labels span {\n    position: absolute; transform: translateX(-50%);\n    font-size: 0.65vw; color: #bbb; font-weight: 600; pointer-events: none;\n  }\n\n  /* Mobile: stack vertically */\n  @media (max-width: 600px) {\n    .ps-tryon-sizing-split { flex-direction: column; }\n    .ps-tryon-sizing-img-col { max-height: 280px; }\n    .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }\n    .ps-tryon-sf-measure-overlay { font-size: 12px; padding: 6px 12px; gap: 5px; bottom: 8px; left: 8px; border-radius: 8px; }\n    .ps-tryon-sf-mode-switch { margin-top: 8px; }\n    .ps-tryon-sf-switch-btn { font-size: 12px; }\n    .ps-hpk-title, .ps-wpk-title { font-size: 18px; }\n    .ps-hpk-desc, .ps-wpk-desc { font-size: 11px; }\n    .ps-hpk-num { font-size: 32px; }\n    .ps-hpk-unit { font-size: 14px; }\n    .ps-hpk-toggle button { font-size: 13px; padding: 5px 18px; }\n    .ps-hpk-area { min-height: 240px; }\n    .ps-hpk-model img { max-width: 100px; }\n    .ps-hpk-mark-label { font-size: 12px; }\n    .ps-hpk-mark-tick { width: 12px; }\n    .ps-wpk-num { font-size: 38px; }\n    .ps-wpk-unit { font-size: 14px; }\n    .ps-wpk-track { height: 50px; }\n    .ps-wpk-labels span { font-size: 10px; }\n  }\n\n  /* Keep old class names for backwards compat */\n  .ps-tryon-section-title { font-size: 0.95vw; font-weight: 600; color: var(--ps-text-primary); margin: 0 0 0.8vw; }\n  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.5vw 1vw; text-align: center; }\n  .ps-tryon-sg-checking-icon { color: var(--ps-accent); margin-bottom: 0.8vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }\n  .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }\n  @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }\n  .ps-tryon-sg-checking-bar-wrap { width: 9vw; height: 4px; background: var(--ps-border-color); border-radius: 2px; overflow: hidden; margin-bottom: 1vw; }\n  .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light)); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }\n  @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }\n  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.3vw; }\n  .ps-tryon-sg-checking-sub { font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; }\n\n  /* Back button */\n  .ps-tryon-back { display: flex; align-items: center; gap: 0.3vw; background: none; border: none; color: var(--ps-text-secondary); font-size: 0.8vw; cursor: pointer; padding: 0; margin-bottom: 0.7vw; font-family: inherit; transition: color 0.2s; }\n  .ps-tryon-back:hover { color: var(--ps-text-primary); }\n  .ps-tryon-back svg { stroke: currentColor; fill: none; }\n\n  /* Sizing form (legacy \u2014 redirect to split view) */\n  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.7vw; }\n  .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }\n  .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: var(--ps-text-secondary); min-width: 4.7vw; flex-shrink: 0; }\n  .ps-tryon-input-row input {\n    flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s; -moz-appearance: textfield;\n  }\n  .ps-tryon-input-row input::-webkit-outer-spin-button,\n  .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-tryon-input-row input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-input-unit { font-size: 0.63vw; color: var(--ps-text-muted); flex-shrink: 0; }\n  .ps-tryon-height-ft { display: flex; align-items: center; gap: 0.31vw; flex: 1; }\n  .ps-tryon-height-ft input { width: 3.13vw; padding: 0.52vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.73vw; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }\n  .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-tryon-height-ft input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-height-ft span { font-size: 0.63vw; color: var(--ps-text-muted); }\n  .ps-tryon-country-select {\n    flex: 1; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit;\n    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;\n    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\");\n    background-repeat: no-repeat; background-position: right 0.73vw center;\n  }\n  .ps-tryon-country-select:focus { border-color: var(--ps-accent); }\n  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; overflow: hidden; }\n  .ps-tryon-unit-btn {\n    padding: 0.31vw 0.73vw; background: transparent; border: none; color: var(--ps-text-secondary);\n    font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;\n  }\n  .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #fff; }\n\n  /* Unit tabs (cm / inches) */\n  .ps-tryon-unit-tabs {\n    display: flex; gap: 0; background: var(--ps-bg-secondary); border: 1.5px solid var(--ps-border-color);\n    border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;\n  }\n  .ps-tryon-unit-tab {\n    flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;\n    color: var(--ps-text-muted); font-size: 0.78vw; font-weight: 700; cursor: pointer;\n    transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;\n    position: relative;\n  }\n  .ps-tryon-unit-tab:first-child { border-right: 1px solid var(--ps-border-color); }\n  .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.02); }\n  .ps-tryon-unit-tab.ps-active {\n    background: var(--ps-accent); color: #fff;\n  }\n  .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: var(--ps-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }\n  .ps-tryon-optional-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.52vw; margin-top: 0.31vw; }\n  .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; padding: 0.52vw 0.73vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }\n  .ps-tryon-optional-toggle:hover { border-color: #555; color: var(--ps-text-secondary); }\n  .ps-tryon-chevron { transition: transform 0.2s; font-size: 0.73vw; }\n  .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.63vw; }\n  .ps-tryon-shoe-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.73vw; margin-top: 0.31vw; display: flex; flex-direction: column; gap: 0.52vw; }\n  .ps-tryon-shoe-title { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-disclaimer { font-size: 0.57vw; color: var(--ps-text-muted); margin: 0.21vw 0 0; }\n  .ps-tryon-form-save-toggle { margin-top: 0.52vw; display: flex; flex-direction: column; gap: 0.42vw; }\n  .ps-tryon-form-save-check {\n    display: flex; align-items: center; gap: 0.42vw; font-size: 0.68vw; color: var(--ps-text-secondary); cursor: pointer; user-select: none;\n  }\n  .ps-tryon-form-save-check input[type=\"checkbox\"] {\n    width: 0.83vw; height: 0.83vw; accent-color: var(--ps-accent); cursor: pointer;\n  }\n  .ps-tryon-form-save-name {\n    padding: 0.42vw 0.63vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: var(--ps-bg-secondary); color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n    transition: border-color 0.2s;\n  }\n  .ps-tryon-form-save-name:focus { border-color: var(--ps-accent); }\n\n  /* Processing */\n  .ps-tryon-processing { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n\n  .ps-tryon-processing-image-wrap {\n    position: relative; width: 11.5vw; height: 14.6vw; margin: 0 auto 1.25vw;\n    border-radius: 0.83vw; overflow: hidden; border: 2px solid var(--ps-border-color);\n  }\n  .ps-tryon-processing-blur {\n    position: absolute; inset: -1.04vw; background-size: cover; background-position: center;\n    filter: blur(25px) brightness(0.5); transform: scale(1.2);\n  }\n  .ps-tryon-processing-model {\n    position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;\n  }\n  .ps-tryon-scan-overlay {\n    position: absolute; inset: 0;\n    background: linear-gradient(180deg, rgba(33,84,239,0.05) 0%, transparent 40%, transparent 60%, rgba(33,84,239,0.05) 100%);\n    pointer-events: none;\n  }\n  .ps-tryon-scan-line {\n    position: absolute; left: 0; right: 0; height: 3px;\n    background: linear-gradient(90deg, transparent, #bb945c 20%, var(--ps-accent-light) 50%, #bb945c 80%, transparent);\n    box-shadow: 0 0 0.78vw rgba(33,84,239,0.6), 0 0 2.08vw rgba(33,84,239,0.2);\n    animation: ps-scan 2.5s ease-in-out infinite;\n    pointer-events: none; z-index: 2;\n  }\n  @keyframes ps-scan {\n    0% { top: 0; opacity: 0; }\n    5% { opacity: 1; }\n    95% { opacity: 1; }\n    100% { top: calc(100% - 3px); opacity: 0; }\n  }\n\n  /* Snap processing step cards */\n  .ps-tryon-snap-steps {\n    display: flex; flex-direction: column; gap: 1.2vw;\n    justify-content: center; padding: 2vw 1.5vw;\n  }\n  .ps-tryon-snap-step {\n    display: flex; align-items: center; gap: 0.8vw;\n    padding: 0.8vw 1vw; border-radius: 0.5vw;\n    background: var(--ps-bg-secondary);\n    border: 1px solid var(--ps-border-subtle);\n    color: var(--ps-text-muted);\n    font-size: 0.83vw; font-weight: 500; font-family: inherit;\n    opacity: 0.4;\n    transition: all 0.4s ease;\n  }\n  .ps-tryon-snap-step.ps-active {\n    opacity: 1; color: var(--ps-text-primary);\n    border-color: var(--ps-border-color);\n    animation: ps-pose-fade 0.4s ease both;\n  }\n  .ps-tryon-snap-step.ps-done {\n    opacity: 0.7; color: var(--ps-text-secondary);\n    border-color: rgba(74,222,128,0.2);\n  }\n  .ps-tryon-snap-step-icon {\n    width: 1.4vw; height: 1.4vw;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  }\n  .ps-tryon-snap-check {\n    color: var(--ps-success-color); font-size: 0.9vw; font-weight: 700;\n  }\n  .ps-tryon-snap-num {\n    color: var(--ps-text-muted); font-size: 0.7vw; font-weight: 600;\n  }\n\n  /* Pose measurement overlay \u2014 animated SVG rings on result image */\n  .ps-tryon-pose-overlay {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    pointer-events: none; z-index: 2;\n  }\n  @keyframes ps-pose-draw {\n    to { stroke-dashoffset: 0; }\n  }\n  @keyframes ps-pose-fade {\n    to { opacity: 1; }\n  }\n  @keyframes ps-dot-pulse {\n    0%, 100% { r: 8; opacity: 0.8; }\n    50% { r: 12; opacity: 1; }\n  }\n\n  .ps-tryon-progress-section {\n    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 15.6vw; margin-bottom: 0.83vw;\n  }\n  .ps-tryon-progress-bar-wrap {\n    flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;\n  }\n  .ps-tryon-progress-bar-fill {\n    height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));\n    border-radius: 3px; transition: width 0.3s ease; width: 0%;\n  }\n  .ps-tryon-progress-pct {\n    font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;\n    font-variant-numeric: tabular-nums;\n  }\n\n  @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\n  .ps-tryon-processing-text { font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw; }\n  .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }\n\n  /* Result \u2014 split layout */\n  .ps-tryon-result-split {\n    display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;\n  }\n  .ps-tryon-result-img-col {\n    flex: 0 0 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.63vw;\n  }\n  .ps-tryon-result-img-col img {\n    width: 100%; max-height: calc(80vh - 8vw); object-fit: contain; border-radius: 0.73vw;\n    box-shadow: 0 0.42vw 1.67vw rgba(0,0,0,0.3); animation: ps-scale-in 0.5s ease both;\n  }\n  .ps-tryon-result-dl-btn {\n    display: inline-flex; align-items: center; gap: 0.31vw;\n    padding: 0.36vw 0.83vw; background: transparent; border: 1px solid var(--ps-border-color);\n    border-radius: 0.42vw; color: var(--ps-text-secondary); font-size: 0.68vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-result-dl-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-result-dl-btn svg { stroke: currentColor; }\n  .ps-tryon-result-info-col {\n    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw;\n  }\n  .ps-tryon-result-fit {\n    display: flex; flex-direction: column; gap: 0.36vw;\n  }\n  .ps-tryon-result-fit-row {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.42vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-result-fit-area { font-size: 0.78vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-result-actions-col {\n    display: flex; flex-direction: column; gap: 0.42vw; margin-top: 0.52vw;\n  }\n  .ps-tryon-result-startover {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 0.68vw;\n    font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.2s;\n    text-align: center;\n  }\n  .ps-tryon-result-startover:hover { color: var(--ps-text-secondary); }\n  /* Legacy result layout */\n  .ps-tryon-result-layout { text-align: center; }\n  .ps-tryon-result-layout img { width: 100%; border-radius: 0.63vw; margin-bottom: 0.83vw; }\n  .ps-tryon-result-actions { display: flex; gap: 0.42vw; margin-top: 0.83vw; }\n  .ps-tryon-result-actions button {\n    flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);\n    font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;\n  }\n  .ps-tryon-btn-download { background: var(--ps-accent); color: #fff; }\n  .ps-tryon-btn-download:hover { opacity: 0.9; }\n  .ps-tryon-btn-retry { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }\n  .ps-tryon-btn-retry:hover { background: rgba(0,0,0,0.08); }\n\n  /* \u2500\u2500 Size Result \u2500\u2500 */\n  .ps-tryon-sr { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n  .ps-tryon-sr-loading { text-align: center; padding: 3vw 0; }\n  .ps-tryon-sr-loading p { font-size: 0.83vw; color: var(--ps-text-muted); margin-top: 0.6vw; }\n  .ps-tryon-size-loading-spinner {\n    width: 1.8vw; height: 1.8vw; border: 2px solid var(--ps-border-color);\n    border-top-color: var(--ps-accent); border-radius: 50%;\n    animation: ps-spin 0.7s linear infinite; margin: 0 auto;\n  }\n  @keyframes ps-spin { to { transform: rotate(360deg); } }\n  .ps-tryon-sr-loading-pulse { animation: ps-loading-pulse 2s ease-in-out infinite; }\n  @keyframes ps-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }\n\n  .ps-tryon-sr-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5vw; flex: 1; min-height: 0; overflow: hidden; }\n\n  /* Left: product image */\n  .ps-tryon-sr-img-col {\n    position: relative; border-radius: 0.8vw; overflow: hidden;\n    background: var(--ps-bg-secondary);\n  }\n  .ps-tryon-sr-product-img {\n    width: 100%; height: 100%;\n    object-fit: contain; object-position: center center;\n    display: block; border-radius: 0.8vw;\n    background: var(--ps-bg-secondary);\n  }\n  .ps-tryon-sr-chart-btn {\n    position: absolute; bottom: 1vw; left: 1vw;\n    background: rgba(255,255,255,0.95); color: var(--ps-text-primary); border: none;\n    padding: 0.4vw 0.8vw; border-radius: 0.3vw; font-size: 0.7vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-chart-btn:hover { background: #fff; }\n\n  /* Right column \u2014 scrolls independently */\n  .ps-tryon-sr-right-col {\n    display: flex; flex-direction: column; gap: 0.8vw;\n    overflow-y: auto; min-height: 0;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-sr-right-fixed {\n    overflow: hidden;\n  }\n  .ps-tryon-sr-right-scroll {\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n\n  /* Size hero \u2014 big letter + label */\n  .ps-tryon-sr-size-hero { display: flex; align-items: flex-start; gap: 0.8vw; }\n  .ps-tryon-sr-size-letter {\n    font-size: 3vw; font-weight: 800; color: var(--ps-text-primary); line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sr-size-meta { display: flex; flex-direction: column; gap: 0.15vw; padding-top: 0.3vw; }\n  .ps-tryon-sr-size-label { font-size: 0.65vw; font-weight: 700; color: var(--ps-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }\n  .ps-tryon-sr-size-label.ps-not-rec { color: var(--ps-error-color); }\n  .ps-tryon-sr-edit-link {\n    background: none; border: none; color: var(--ps-accent); font-size: 0.7vw; font-weight: 500;\n    cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; text-align: left;\n  }\n  .ps-tryon-sr-edit-link:hover { color: var(--ps-accent-light); }\n\n  /* Size changed */\n  .ps-tryon-sr-size-changed {\n    display: inline-flex; align-items: center; gap: 0.3vw;\n    padding: 0.3vw 0.6vw; border-radius: 0.3vw;\n    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.2);\n    font-size: 0.7vw; color: var(--ps-accent-light);\n  }\n  .ps-tryon-sr-size-changed svg { stroke: var(--ps-accent); }\n  .ps-tryon-sr-size-changed strong { color: var(--ps-text-primary); }\n\n  /* Tabs */\n  .ps-tryon-sr-tabs { display: flex; border-bottom: 1.5px solid var(--ps-border-color); margin-top: 3.5vh; }\n  .ps-tryon-sr-tab {\n    background: none; border: none; padding: 0.4vw 0.8vw; margin-bottom: -1.5px;\n    font-size: 0.75vw; font-weight: 600; color: var(--ps-text-muted); cursor: pointer;\n    font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.2s;\n  }\n  .ps-tryon-sr-tab:hover { color: var(--ps-text-secondary); }\n  .ps-tryon-sr-tab.ps-active { color: var(--ps-text-primary); border-bottom-color: var(--ps-accent); }\n\n  /* Fit list \u2014 \"Your fit\" tab */\n  /* \u2500\u2500 Fit table \u2500\u2500 */\n  .ps-tryon-sr-fit-table {\n    width: 100%; border-collapse: collapse; font-size: 0.85vw; margin-top: 0.8vw;\n  }\n  .ps-tryon-sr-fit-table thead th {\n    font-size: 0.7vw; font-weight: 500; color: #aaa; text-transform: uppercase;\n    letter-spacing: 0.05em; padding: 0.3vw 0 0.5vw; text-align: left;\n    border-bottom: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-sr-fit-table thead th:last-child { text-align: right; }\n  .ps-tryon-sr-fit-table tbody tr { border-bottom: 1px solid var(--ps-border-subtle); }\n  .ps-tryon-sr-fit-table tbody tr:last-child { border-bottom: none; }\n  .ps-tryon-sr-fit-table td { padding: 0.75vw 0; vertical-align: middle; color: var(--ps-text-primary); }\n  .ps-tryon-sr-fit-table td:last-child { text-align: right; }\n  .ps-tryon-sr-ft-area { font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-sr-ft-you { color: var(--ps-text-primary); font-weight: 600; }\n  .ps-tryon-sr-ft-garment { color: var(--ps-text-secondary); }\n  .ps-tryon-sr-fit-status {\n    font-size: 0.65vw; font-weight: 600; padding: 0.18vw 0.45vw; border-radius: 0.25vw;\n    white-space: nowrap; display: inline-block;\n  }\n  .ps-tryon-sr-fit-status.ps-fit-good { color: #4ade80; background: rgba(74,222,128,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-a-bit-tight { color: #f59e0b; background: rgba(245,158,11,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-tight { color: #e87040; background: rgba(232,112,64,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-too-tight { color: #dc2626; background: rgba(220,38,38,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-a-bit-loose { color: #f59e0b; background: rgba(245,158,11,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-loose { color: #e87040; background: rgba(232,112,64,0.12); }\n  .ps-tryon-sr-fit-status.ps-fit-too-loose { color: #dc2626; background: rgba(220,38,38,0.12); }\n\n  /* \u2500\u2500 Size guide fit list (chart tab) \u2500\u2500 */\n  .ps-tryon-sr-fit-list { display: flex; flex-direction: column; gap: 0; }\n  .ps-tryon-sr-fit-item {\n    padding: 0.55vw 0; border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-sr-fit-item:last-child { border-bottom: none; }\n  .ps-tryon-sr-fit-head {\n    display: flex; justify-content: space-between; align-items: baseline;\n  }\n  .ps-tryon-sr-fit-area { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-sr-fit-range { font-size: 0.8vw; font-weight: 600; color: var(--ps-text-dim); }\n  .ps-tryon-sr-fit-note { font-size: 0.6vw; color: #555; margin-top: 0.5vw; text-align: center; }\n\n  /* \u2500\u2500 Upload photo modal (inline in size result) \u2500\u2500 */\n  .ps-tryon-upload-modal-overlay {\n    position: absolute; inset: 0; z-index: 20;\n    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);\n    display: flex; align-items: center; justify-content: center;\n    border-radius: var(--ps-modal-radius, 0.83vw);\n  }\n  .ps-tryon-upload-modal {\n    background: var(--ps-bg-secondary); border: 1px solid var(--ps-border-color); border-radius: 0.83vw;\n    padding: 1.2vw; width: 80%; max-width: 22vw;\n    display: flex; flex-direction: column; gap: 0.8vw;\n  }\n  .ps-tryon-upload-modal-header {\n    display: flex; justify-content: space-between; align-items: center;\n  }\n  .ps-tryon-upload-modal-header h3 {\n    font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin: 0;\n  }\n  .ps-tryon-upload-modal-close {\n    background: none; border: none; color: var(--ps-text-secondary); font-size: 1.2vw;\n    cursor: pointer; line-height: 1; padding: 0;\n  }\n  .ps-tryon-upload-modal-close:hover { color: var(--ps-text-primary); }\n  .ps-tryon-upload-modal-dropzone {\n    border: 1.5px dashed #444; border-radius: 0.6vw; padding: 1.5vw;\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\n    gap: 0.4vw; cursor: pointer; transition: all 0.2s; min-height: 8vw;\n  }\n  .ps-tryon-upload-modal-dropzone:hover { border-color: var(--ps-accent); }\n  .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-upload-modal-dropzone svg { color: var(--ps-text-muted); }\n  .ps-tryon-upload-modal-dropzone p {\n    font-size: 0.75vw; color: var(--ps-text-secondary); margin: 0; font-weight: 500;\n  }\n  .ps-tryon-upload-modal-dropzone span {\n    font-size: 0.6vw; color: var(--ps-text-muted);\n  }\n  .ps-tryon-upload-modal-preview {\n    position: relative; border-radius: 0.6vw; overflow: hidden;\n    max-height: 14vw; display: flex; align-items: center; justify-content: center;\n    background: #111;\n  }\n  .ps-tryon-upload-modal-preview img {\n    width: 100%; max-height: 14vw; object-fit: contain;\n  }\n  .ps-tryon-upload-modal-remove {\n    position: absolute; top: 0.3vw; right: 0.3vw;\n    width: 1.3vw; height: 1.3vw; border-radius: 50%;\n    background: rgba(0,0,0,0.7); border: none; color: var(--ps-text-primary);\n    font-size: 0.8vw; cursor: pointer; display: flex;\n    align-items: center; justify-content: center;\n  }\n  .ps-tryon-upload-modal-remove:hover { background: #dc2626; }\n\n  .ps-tryon-sr-full-chart-btn {\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n    margin: 0.6vw auto 0; padding: 0.4vw 1vw;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-full-chart-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n\n  /* Chart table \u2014 \"Size guide\" tab */\n  /* Full-screen overlay inside the modal */\n  .ps-tryon-sr-chart-overlay {\n    position: absolute; inset: 0; z-index: 50;\n    background: var(--ps-modal-bg, #FFFFFF);\n    display: flex; flex-direction: column;\n    animation: ps-fade-in 0.2s ease;\n    overflow: hidden;\n  }\n  .ps-tryon-sr-chart-modal, .ps-tryon-guide-modal {\n    display: flex; flex-direction: column;\n    flex: 1; min-height: 0; width: 100%; height: 100%;\n  }\n  .ps-tryon-sr-chart-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.7vw 1.2vw; border-bottom: 1px solid var(--ps-border-color); flex-shrink: 0;\n  }\n  .ps-tryon-sr-chart-header h4 { margin: 0; font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }\n  .ps-tryon-sr-chart-close {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 1.1vw; cursor: pointer; padding: 0.2vw;\n    font-family: inherit; transition: color 0.2s;\n  }\n  .ps-tryon-sr-chart-close:hover { color: var(--ps-text-primary); }\n  .ps-tryon-sr-chart-scroll { padding: 1vw 1.2vw; overflow-y: auto; flex: 1; min-height: 0; }\n\n  /* Photo guide \u2014 side by side */\n  .ps-tryon-guide-modal { }\n  .ps-tryon-guide-split {\n    display: flex; flex: 1; min-height: 0; gap: 0; overflow: hidden;\n  }\n  .ps-tryon-guide-left {\n    flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 1vw; border-right: 1px solid #282828;\n    justify-content: center; min-height: 0; overflow: hidden;\n  }\n  .ps-tryon-guide-right {\n    flex: 1; display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 0.8vw; overflow-y: auto; min-height: 0;\n    scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;\n  }\n  .ps-tryon-guide-right::-webkit-scrollbar { width: 4px; }\n  .ps-tryon-guide-right::-webkit-scrollbar-track { background: transparent; }\n  .ps-tryon-guide-right::-webkit-scrollbar-thumb { background: var(--ps-border-color); border-radius: 2px; }\n\n  /* Upload dropzone */\n  .ps-tryon-guide-dropzone {\n    border: 1.5px dashed var(--ps-border-color); border-radius: 0.6vw; padding: 1.5vw 1vw;\n    display: flex; flex-direction: column; align-items: center; gap: 0.3vw;\n    cursor: pointer; transition: all 0.2s; text-align: center;\n  }\n  .ps-tryon-guide-dropzone:hover, .ps-tryon-guide-dropzone.ps-drag {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.05);\n  }\n  .ps-tryon-guide-dropzone svg { color: #555; stroke: #555; }\n  .ps-tryon-guide-dropzone-text { margin: 0; font-size: 0.9vw; color: var(--ps-text-primary); font-weight: 600; }\n  .ps-tryon-guide-dropzone p { margin: 0; font-size: 0.65vw; color: var(--ps-text-secondary); font-weight: 500; }\n  .ps-tryon-guide-dropzone span { font-size: 0.52vw; color: var(--ps-text-muted); }\n  .ps-tryon-guide-dropzone.ps-has-file { padding: 0; cursor: default; border-style: solid; flex: 1; min-height: 0; overflow: hidden; }\n\n  /* Preview inside dropzone */\n  .ps-tryon-guide-preview { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n  .ps-tryon-guide-preview img {\n    max-width: 100%; max-height: 100%; object-fit: contain;\n    display: block; border-radius: 0.5vw;\n    background: var(--ps-modal-bg, #FFFFFF);\n  }\n  .ps-tryon-guide-preview-remove {\n    position: absolute; top: 0.4vw; right: 0.4vw;\n    width: 1.4vw; height: 1.4vw; display: flex; align-items: center; justify-content: center;\n    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;\n    color: var(--ps-text-primary); font-size: 0.65vw; cursor: pointer; font-family: inherit;\n    transition: all 0.2s;\n  }\n  .ps-tryon-guide-preview-remove:hover { background: rgba(239,68,68,0.8); }\n\n\n  /* Selected file row */\n  .ps-tryon-guide-file {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.45vw 0.7vw; background: #222; border-radius: 0.4vw; border: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-guide-file-name { font-size: 0.6vw; color: var(--ps-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .ps-tryon-guide-file-remove {\n    background: none; border: none; color: #e55; font-size: 0.55vw; cursor: pointer; font-family: inherit;\n    padding: 0.1vw 0.3vw; transition: color 0.2s;\n  }\n  .ps-tryon-guide-file-remove:hover { color: #f77; }\n\n  /* Tips section */\n  .ps-tryon-guide-tips {\n    border: 1px solid #282828; border-radius: 0.5vw; overflow: hidden;\n  }\n  .ps-tryon-guide-tips-header {\n    display: flex; align-items: center; gap: 0.4vw;\n    padding: 0.5vw 0.7vw; background: #1e1f1e; font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n  }\n  .ps-tryon-guide-tips-header svg { stroke: var(--ps-accent); }\n  .ps-tryon-guide-tips-grid {\n    display: grid; grid-template-columns: 1fr 1fr; gap: 0;\n  }\n  .ps-tryon-guide-do, .ps-tryon-guide-dont { padding: 0.5vw 0.7vw; }\n  .ps-tryon-guide-do { background: rgba(34,197,94,0.06); border-right: 1px solid #282828; }\n  .ps-tryon-guide-dont { background: rgba(239,68,68,0.06); }\n  .ps-tryon-guide-do-title { font-size: 0.68vw; font-weight: 700; color: #4ade80; display: block; margin-bottom: 0.3vw; }\n  .ps-tryon-guide-dont-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; margin-bottom: 0.3vw; }\n  .ps-tryon-guide-do ul, .ps-tryon-guide-dont ul {\n    margin: 0; padding: 0 0 0 0.8vw; list-style: disc;\n  }\n  .ps-tryon-guide-do li, .ps-tryon-guide-dont li {\n    font-size: 0.58vw; color: #bbb; line-height: 1.7;\n  }\n  .ps-tryon-guide-do li { color: #a7f3d0; }\n  .ps-tryon-guide-dont li { color: #fca5a5; }\n\n  /* Quick tip */\n  .ps-tryon-guide-quicktip {\n    display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n    background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-quicktip-icon { font-size: 0.8vw; flex-shrink: 0; }\n  .ps-tryon-guide-quicktip-title { font-size: 0.68vw; font-weight: 700; color: #60a5fa; display: block; }\n  .ps-tryon-guide-quicktip p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #93c5fd; line-height: 1.5; }\n\n  /* Privacy note */\n  .ps-tryon-guide-privacy {\n    display: flex; gap: 0.4vw; padding: 0.5vw 0.7vw;\n    background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); border-radius: 0.5vw;\n  }\n  .ps-tryon-guide-privacy-icon { font-size: 0.8vw; flex-shrink: 0; }\n  .ps-tryon-guide-privacy-title { font-size: 0.68vw; font-weight: 700; color: #f87171; display: block; }\n  .ps-tryon-guide-privacy p { margin: 0.15vw 0 0; font-size: 0.6vw; color: #fca5a5; line-height: 1.5; }\n\n  /* Section title in full chart */\n  .ps-tryon-chart-section { margin-bottom: 1.2vw; }\n  .ps-tryon-chart-section:last-child { margin-bottom: 0; }\n  .ps-tryon-chart-section-title {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.4vw 0; margin-bottom: 0.4vw;\n    border-bottom: 1px solid var(--ps-border-color); font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary);\n  }\n  .ps-tryon-chart-section-rec {\n    font-size: 0.6vw; font-weight: 500; color: var(--ps-text-secondary);\n  }\n  .ps-tryon-chart-section-rec strong {\n    color: var(--ps-accent); font-weight: 700; font-size: 0.7vw;\n  }\n  .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(33,84,239,0.1); }\n  .ps-active-row .ps-size-col { color: var(--ps-accent) !important; font-weight: 700; }\n\n  .ps-tryon-sr-chart-table-wrap { overflow-x: auto; max-height: 14vw; overflow-y: auto; }\n  .ps-tryon-sr-chart-table { width: 100%; font-size: 0.7vw; border-collapse: collapse; }\n  .ps-tryon-sr-chart-table th {\n    text-align: left; padding: 0.35vw 0.5vw; color: var(--ps-text-muted); font-weight: 600;\n    border-bottom: 1px solid var(--ps-border-color); position: sticky; top: 0; background: var(--ps-bg-secondary); color: var(--ps-text-primary);\n  }\n  .ps-tryon-sr-chart-table td { padding: 0.3vw 0.5vw; color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle); }\n  .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(33,84,239,0.08); }\n\n  /* Size chips */\n  .ps-tryon-sr-chips { display: flex; flex-wrap: wrap; gap: 0.4vw; justify-content: center; margin-top: 3.5vh; }\n  .ps-tryon-sr-chip {\n    min-width: 2.2vw; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s; padding: 0.3vw 0.8vw; gap: 0.1vw;\n  }\n  .ps-tryon-sr-chip-hint { font-size: 0.58vw; font-weight: 400; color: var(--ps-text-muted); text-transform: lowercase; }\n  .ps-tryon-sr-chip:hover { border-color: #555; color: var(--ps-text-secondary); }\n  .ps-tryon-sr-chip.ps-active { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; }\n  .ps-tryon-sr-chip.ps-active .ps-tryon-sr-chip-hint { color: #fff; }\n\n  /* Multi-section layout (tuxedo, suit, set products) */\n  .ps-tryon-sr-split-multi { grid-template-columns: 1fr 1fr; }\n  .ps-tryon-sr-img-col-small { }\n  .ps-tryon-sr-multi-top {\n    display: flex; align-items: center; justify-content: space-between;\n    padding-bottom: 0.5vw; margin-bottom: 0.4vw;\n    border-bottom: 1px solid rgba(0,0,0,0.03);\n  }\n  .ps-tryon-sr-multi-title {\n    font-size: 0.9vw; font-weight: 300; color: var(--ps-text-primary);\n    letter-spacing: 0.15em; text-transform: uppercase;\n  }\n\n  /* \u2500\u2500 Full-width section picker \u2014 redesigned \u2500\u2500 */\n  .ps-tryon-sr-picker {\n    display: flex; flex-direction: column; gap: 0.6vw;\n    padding: 0;\n  }\n  .ps-tryon-sr-picker-actions {\n    display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw;\n  }\n\n  /* Card row */\n  .ps-tryon-sec-row {\n    display: flex; gap: 0.5vw;\n  }\n  .ps-tryon-sec-row-compact { flex-wrap: wrap; }\n  .ps-tryon-sec-row-compact .ps-tryon-sec-bigcard { min-width: 40%; flex: 1 1 40%; }\n\n  .ps-tryon-sec-bigcard {\n    position: relative; overflow: hidden;\n    display: flex; flex-direction: column;\n    background: #0e0e0e; border: 1px solid rgba(0,0,0,0.04); border-radius: 0.7vw;\n    cursor: pointer; font-family: inherit;\n    text-align: center; flex: 1; min-width: 0; padding: 0;\n    transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;\n    animation: ps-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    opacity: 0;\n  }\n  .ps-tryon-sec-bigcard:nth-child(1) { animation-delay: 0s; }\n  .ps-tryon-sec-bigcard:nth-child(2) { animation-delay: 0.08s; }\n  .ps-tryon-sec-bigcard:nth-child(3) { animation-delay: 0.16s; }\n  .ps-tryon-sec-bigcard:nth-child(4) { animation-delay: 0.24s; }\n  @keyframes ps-card-in {\n    from { opacity: 0; transform: translateY(1vw) scale(0.96); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  .ps-tryon-sec-bigcard:hover {\n    border-color: var(--ps-accent);\n    transform: translateY(-0.2vw) scale(1.015);\n    box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(33,84,239,0.1);\n  }\n  .ps-tryon-sec-bigcard:not(.ps-has-img) {\n    align-items: center; justify-content: center;\n    padding: 1.2vw 0.8vw; min-height: 14vw; gap: 0.3vw;\n  }\n\n  /* Image */\n  .ps-tryon-sec-bigcard-bg {\n    width: 100%; max-height: 20vw; display: block;\n    object-fit: cover; object-position: center top;\n    border-radius: 0.7vw 0.7vw 0 0;\n    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-bg {\n    transform: scale(1.03);\n  }\n\n  /* Gradient overlay */\n  .ps-tryon-sec-bigcard-overlay {\n    position: absolute; bottom: 0; left: 0; right: 0;\n    height: 65%;\n    background: linear-gradient(to top, #0e0e0e 0%, rgba(14,14,14,0.85) 40%, transparent 100%);\n    z-index: 1;\n  }\n\n  /* Text content */\n  .ps-tryon-sec-bigcard-content {\n    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;\n    display: flex; flex-direction: column; align-items: center; gap: 0.15vw;\n    padding: 0.8vw 0.5vw;\n  }\n\n  /* Fallback icon (no image) */\n  .ps-tryon-sec-bigcard-icon {\n    width: 2.8vw; height: 2.8vw;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.12);\n    border-radius: 50%;\n    color: var(--ps-accent); transition: all 0.3s;\n  }\n  .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-icon {\n    background: rgba(33,84,239,0.12); border-color: rgba(33,84,239,0.25);\n    transform: scale(1.06);\n  }\n  .ps-tryon-sec-bigcard-icon svg { stroke: currentColor; }\n\n  .ps-tryon-sec-bigcard-name {\n    font-size: 0.68vw; font-weight: 400; color: rgba(255,255,255,0.7);\n    text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2;\n    text-shadow: 0 1px 6px rgba(0,0,0,0.8);\n  }\n  .ps-tryon-sec-bigcard-size {\n    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);\n    text-shadow: 0 2px 8px rgba(0,0,0,0.5);\n    line-height: 1; letter-spacing: -0.02em;\n  }\n  .ps-tryon-sec-bigcard-badge {\n    font-size: 0.45vw; font-weight: 600; text-transform: uppercase;\n    color: var(--ps-accent); background: none;\n    border: 1px solid rgba(33,84,239,0.3);\n    padding: 0.12vw 0.45vw; border-radius: 2vw; letter-spacing: 0.08em;\n  }\n  .ps-tryon-sec-bigcard-fit {\n    font-size: 0.52vw; color: rgba(255,255,255,0.45); font-weight: 400;\n    letter-spacing: 0.04em;\n  }\n\n  /* \u2500\u2500 Section detail view (drill-down from card) \u2500\u2500 */\n  @keyframes ps-sec-detail-in {\n    from { opacity: 0; transform: translateX(1vw); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n  .ps-tryon-sec-detail {\n    display: flex; flex-direction: column; gap: 0.5vw;\n    animation: ps-v2-fade 0.3s ease forwards;\n    flex: 1; min-height: 0; overflow-y: auto;\n    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;\n  }\n  .ps-tryon-sec-detail-back {\n    display: inline-flex; align-items: center; gap: 0.25vw;\n    background: none; border: none; color: rgba(0,0,0,0.3); cursor: pointer;\n    font-size: 0.6vw; font-family: inherit; padding: 0;\n    transition: color 0.2s; align-self: flex-start;\n    letter-spacing: 0.03em;\n  }\n  .ps-tryon-sec-detail-back:hover { color: var(--ps-accent); }\n  .ps-tryon-sec-detail-back svg { width: 0.7vw; height: 0.7vw; stroke: currentColor; }\n  .ps-tryon-sec-detail-header {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding-bottom: 0.4vw;\n    border-bottom: 1px solid rgba(0,0,0,0.04);\n  }\n  .ps-tryon-sec-detail-icon {\n    width: 1.8vw; height: 1.8vw;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.12);\n    border-radius: 50%; color: var(--ps-accent);\n  }\n  .ps-tryon-sec-detail-icon svg { stroke: currentColor; }\n  .ps-tryon-sec-detail-name {\n    font-size: 0.8vw; font-weight: 400; color: var(--ps-text-primary);\n    text-transform: uppercase; letter-spacing: 0.1em;\n  }\n  .ps-tryon-sec-detail .ps-tryon-sr-fit-table td { padding: 0.9vw 0; }\n  .ps-tryon-sec-detail .ps-tryon-sr-fit-table th { padding: 0.4vw 0 0.6vw; }\n  .ps-tryon-sec-detail .ps-tryon-sr-chips { gap: 0.4vw; margin: 0.3vw 0; }\n\n  /* Length inline selector (inside section detail) */\n  .ps-tryon-sec-length-row {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding: 0.3vw 0; border-top: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-sec-length-label {\n    font-size: 0.62vw; font-weight: 600; color: var(--ps-text-secondary);\n    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;\n  }\n\n  /* Reasoning */\n  .ps-tryon-sr-reasoning { padding: 0.8vw; border: 1px solid var(--ps-border-color); border-radius: 0.6vw; background: var(--ps-bg-secondary); }\n  .ps-tryon-sr-reasoning p { font-size: 0.75vw; color: var(--ps-text-secondary); line-height: 1.6; margin: 0; }\n\n  /* Result actions */\n  /* Image action icons \u2014 bottom-left of image */\n  .ps-tryon-sr-img-actions {\n    position: absolute; bottom: 0.6vw; left: 0.6vw; z-index: 3;\n    display: flex; flex-direction: column; gap: 0.3vw;\n  }\n  .ps-tryon-sr-glass-btn {\n    background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--ps-border-color); border-radius: 0.45vw;\n    color: var(--ps-text-primary); font-size: 0.62vw; font-weight: 700; font-family: inherit;\n    padding: 0.4vw 0.8vw; cursor: pointer; transition: all 0.2s;\n    white-space: nowrap; letter-spacing: 0.02em;\n    display: inline-flex; align-items: center;\n  }\n  /* When used standalone on an image (not inside actions container) */\n  .ps-tryon-sr-img-col > .ps-tryon-sr-glass-btn {\n    position: absolute; bottom: 0.5vw; left: 0.5vw; z-index: 3;\n  }\n  .ps-tryon-sr-glass-btn:hover {\n    background: rgba(255,255,255,1); border-color: var(--ps-accent);\n  }\n  .ps-tryon-sr-glass-btn svg, .ps-tryon-sr-img-icon svg { width: 0.65vw; height: 0.65vw; }\n  .ps-tryon-sr-img-icon {\n    display: inline-flex; align-items: center; gap: 0.3vw;\n    padding: 0.35vw 0.7vw;\n    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n    border: 1px solid var(--ps-border-color); border-radius: 0.4vw;\n    color: var(--ps-text-primary); font-size: 0.6vw; font-weight: 600; font-family: inherit;\n    cursor: pointer; transition: all 0.2s; white-space: nowrap;\n  }\n  .ps-tryon-sr-img-icon:hover { background: #fff; border-color: var(--ps-accent); color: var(--ps-accent); }\n\n  /* See fit visually \u2014 below size chips */\n  .ps-tryon-sr-visual-btn {\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n    width: 100%; padding: 0.5vw; margin-top: 0.3vw;\n    background: transparent; border: 1px solid var(--ps-border-color); border-radius: 0.5vw;\n    color: var(--ps-text-secondary); font-size: 0.7vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-tryon-sr-visual-btn:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-sr-visual-btn svg { stroke: currentColor; }\n\n  /* Dark overlay behind SVG lines */\n  .ps-tryon-pose-overlay {\n    position: absolute; inset: 0; z-index: 1;\n    background: rgba(0,0,0,0.35);\n    animation: ps-fade-in 0.4s ease both;\n    border-radius: inherit;\n  }\n\n  /* SVG pose overlay */\n  .ps-tryon-pose-svg {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    pointer-events: none; z-index: 2;\n  }\n\n  /* Dotted curved line \u2014 draws in smoothly */\n  .ps-tryon-pose-line {\n    stroke-dashoffset: 80;\n    animation: ps-pose-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  /* HTML pill labels \u2014 positioned absolutely on the image */\n  .ps-tryon-pose-pill {\n    position: absolute; z-index: 3; transform: translateY(-50%);\n    display: flex; align-items: center; gap: 0.4vw;\n    background: rgba(15,15,15,0.85); backdrop-filter: blur(6px);\n    border-radius: 0.5vw; padding: 0.35vw 0.6vw;\n    opacity: 0;\n    animation: ps-pose-pill-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n  .ps-tryon-pose-pill-dot {\n    width: 0.5vw; height: 0.5vw; border-radius: 50%; flex-shrink: 0;\n  }\n  .ps-tryon-pose-pill-text { display: flex; flex-direction: column; gap: 0.05vw; }\n  .ps-tryon-pose-pill-name {\n    font-size: 0.75vw; font-weight: 700; color: var(--ps-text-primary); line-height: 1.2;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  .ps-tryon-pose-pill-fit {\n    font-size: 0.6vw; font-weight: 600; line-height: 1.2;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  @keyframes ps-pose-draw {\n    from { stroke-dashoffset: 80; opacity: 0; }\n    10% { opacity: 1; }\n    to { stroke-dashoffset: 0; opacity: 1; }\n  }\n  @keyframes ps-pose-pill-in {\n    from { opacity: 0; transform: translateX(-2px); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n  .ps-tryon-sr-cta {\n    width: 100%; padding: 0.7vw;\n    background: var(--ps-accent); color: #0a0a0a;\n    border: none; border-radius: 0.4vw;\n    font-size: 0.75vw; font-weight: 700; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.1em; text-transform: uppercase;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-top: auto;\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n  }\n  .ps-tryon-sr-cta:hover {\n    background: var(--ps-accent-light);\n    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);\n    transform: translateY(-1px);\n  }\n\n  /* Size chip recommended dot */\n  .ps-tryon-sr-chip { position: relative; }\n  .ps-tryon-sr-rec-dot {\n    position: absolute; bottom: -0.3vw; left: 50%; transform: translateX(-50%);\n    width: 0.35vw; height: 0.35vw; border-radius: 50%; background: var(--ps-accent);\n  }\n  .ps-tryon-sr-chip.ps-active .ps-tryon-sr-rec-dot { background: #fff; }\n  .ps-tryon-sr-chip.ps-recommended { border-color: var(--ps-accent); }\n\n  /* \u2500\u2500 Full Size Chart Overlay \u2500\u2500 */\n  .ps-tryon-fc-overlay {\n    position: absolute; inset: 0; z-index: 10;\n    background: #111211;\n    display: flex; flex-direction: column;\n    animation: ps-fade-in 0.2s ease;\n  }\n  @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }\n  .ps-tryon-fc-panel {\n    background: #111211;\n    width: 100%; height: 100%; overflow: hidden;\n    display: flex; flex-direction: column;\n  }\n  .ps-tryon-fc-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.8vw 1.2vw; border-bottom: 1px solid #282828;\n  }\n  .ps-tryon-fc-title {\n    font-size: 0.8vw; font-weight: 700; color: var(--ps-text-primary);\n    letter-spacing: 0.12em; margin: 0;\n  }\n  .ps-tryon-fc-close {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 1.4vw;\n    cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s;\n  }\n  .ps-tryon-fc-close:hover { color: var(--ps-text-primary); }\n\n  /* Your measurements bar */\n  .ps-tryon-fc-measures {\n    padding: 0.7vw 1.2vw; background: #1a1a1a; border-bottom: 1px solid #282828;\n  }\n  .ps-tryon-fc-measures-label {\n    display: flex; align-items: center; gap: 0.5vw;\n    font-size: 0.6vw; font-weight: 700; color: var(--ps-text-dim);\n    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4vw;\n  }\n  .ps-tryon-fc-measures-vals {\n    display: flex; gap: 1.5vw;\n  }\n  .ps-tryon-fc-measures-val { font-size: 0.9vw; color: var(--ps-text-secondary); }\n  .ps-tryon-fc-measures-val strong { font-weight: 700; color: var(--ps-text-primary); margin-right: 0.15vw; }\n  .ps-tryon-fc-measures-val span { font-size: 0.65vw; color: var(--ps-text-muted); }\n\n  /* Full table */\n  .ps-tryon-fc-table-wrap {\n    flex: 1; overflow: auto; padding: 0.5vw 1.2vw 1.2vw;\n  }\n  .ps-tryon-fc-table {\n    width: 100%; border-collapse: collapse; font-size: 0.75vw;\n  }\n  .ps-tryon-fc-table th {\n    text-align: center; padding: 0.5vw 0.6vw;\n    font-size: 0.6vw; font-weight: 700; color: var(--ps-text-muted);\n    text-transform: uppercase; letter-spacing: 0.06em;\n    border-bottom: 1.5px solid var(--ps-border-color);\n  }\n  .ps-tryon-fc-table th:first-child { text-align: left; }\n  .ps-tryon-fc-table td {\n    text-align: center; padding: 0.45vw 0.6vw;\n    color: var(--ps-text-secondary); border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-tryon-fc-table td:first-child { text-align: left; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(33,84,239,0.05); }\n  .ps-tryon-fc-rec-pill {\n    display: inline-flex; align-items: center; justify-content: center;\n    background: #fff; color: var(--ps-text-primary); padding: 0.15vw 0.5vw;\n    border-radius: 1vw; font-weight: 800; font-size: 0.7vw;\n  }\n\n  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: var(--ps-accent); } .ps-conf-low { color: var(--ps-error-color); }\n  .ps-tryon-size-compact { padding: 0.5vw 0; }\n  .ps-tryon-size-compact-label { font-size: 0.78vw; color: var(--ps-text-secondary); font-weight: 500; }\n\n  /* Save profile prompt */\n  .ps-tryon-save-prompt { margin-top: 0.73vw; padding: 0.73vw; border: 1px solid var(--ps-border-color); border-radius: 0.63vw; background: var(--ps-bg-secondary); }\n  .ps-tryon-save-label { font-size: 0.63vw; color: var(--ps-text-secondary); margin-bottom: 0.52vw; }\n  .ps-tryon-save-row { display: flex; gap: 0.42vw; }\n  .ps-tryon-save-row input {\n    flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw;\n    background: #111211; color: var(--ps-text-primary); font-size: 0.68vw; font-family: inherit; outline: none;\n  }\n  .ps-tryon-save-row input:focus { border-color: var(--ps-accent); }\n  .ps-tryon-save-row button {\n    padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #fff; border: none; border-radius: 0.52vw;\n    font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;\n  }\n  .ps-tryon-save-row button:hover { opacity: 0.9; }\n  .ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }\n  .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid var(--ps-accent) !important; color: var(--ps-accent) !important; }\n  .ps-tryon-save-new-btn:hover { background: rgba(33,84,239,0.1) !important; }\n  .ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }\n  .ps-tryon-save-done svg { stroke: currentColor; }\n\n  /* Error */\n  .ps-tryon-error { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }\n  .ps-tryon-error svg { color: var(--ps-error-color); margin-bottom: 0.63vw; }\n  .ps-tryon-error-text { font-size: 0.73vw; color: var(--ps-error-color); margin: 0 0 0.83vw; }\n\n  /* Footer */\n  .ps-tryon-powered { text-align: center; padding: 0.63vw 1.25vw 0.83vw; font-size: 0.57vw; color: var(--ps-text-muted); }\n  .ps-tryon-powered a { color: var(--ps-accent); text-decoration: none; }\n  .ps-tryon-powered a:hover { text-decoration: underline; }\n\n  /* Drawer */\n  .ps-tryon-drawer {\n    position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #FFFFFF);\n    overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1.04vw 1.25vw;\n    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);\n    box-sizing: border-box;\n  }\n  .ps-tryon-drawer-open { transform: translateX(0); }\n  .ps-tryon-drawer-header { display: flex; align-items: center; gap: 0.52vw; padding-bottom: 0.73vw; margin-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); }\n  .ps-tryon-drawer-back {\n    width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;\n    cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s; flex-shrink: 0;\n  }\n  .ps-tryon-drawer-back:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-tryon-drawer-title { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); flex: 1; }\n  .ps-tryon-drawer-add-btn {\n    width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n    border: 1.5px solid var(--ps-border-color); border-radius: 0.42vw; background: transparent;\n    color: var(--ps-accent); font-size: 1vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.2s; flex-shrink: 0; line-height: 1;\n  }\n  .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; max-width: 100%; overflow-x: hidden; }\n  .ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: var(--ps-text-muted); font-size: 0.73vw; }\n\n  /* Profile items */\n  .ps-tryon-profile-item {\n    display: flex; align-items: center; gap: 0.63vw; padding: 0.73vw;\n    border: 1px solid var(--ps-border-color); border-radius: 0.63vw; cursor: pointer; transition: all 0.2s;\n  }\n  .ps-tryon-profile-item:hover { border-color: var(--ps-accent); }\n  .ps-tryon-profile-avatar {\n    width: 2.08vw; height: 2.08vw; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    background: rgba(33,84,239,0.1); flex-shrink: 0;\n  }\n  .ps-tryon-profile-avatar svg { stroke: var(--ps-accent); fill: none; }\n  .ps-tryon-profile-info { flex: 1; min-width: 0; }\n  .ps-tryon-profile-name { font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-profile-detail { font-size: 0.57vw; color: var(--ps-text-secondary); margin-top: 2px; }\n  .ps-tryon-profile-item > svg:last-child { color: var(--ps-text-muted); flex-shrink: 0; transition: color 0.2s; }\n  .ps-tryon-profile-item:hover > svg:last-child { color: var(--ps-accent); }\n\n  /* History items */\n  .ps-tryon-history-item {\n    display: flex; gap: 0.73vw; padding: 0.73vw;\n    border: 1px solid var(--ps-border-color); border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;\n  }\n  .ps-tryon-history-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(33,84,239,0.06); }\n  .ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }\n  .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; }\n  .ps-tryon-history-info { flex: 1; min-width: 0; }\n  .ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n  .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }\n  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }\n  .ps-tryon-history-sizing-reason { font-size: 0.57vw; color: var(--ps-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n  .ps-tryon-history-size-badge {\n    flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));\n    color: #fff; font-size: 0.68vw; font-weight: 700;\n  }\n  .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }\n  .ps-tryon-history-delete {\n    width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;\n    border: none; background: transparent; cursor: pointer; color: var(--ps-text-muted); border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;\n  }\n  .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: var(--ps-error-color); }\n  .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }\n  .ps-tryon-history-clickable { cursor: pointer; }\n  .ps-tryon-history-sections { display: flex; flex-wrap: wrap; gap: 0.3vw; margin-top: 0.31vw; }\n  .ps-tryon-history-section-chip {\n    font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(33,84,239,0.18);\n    border: 1px solid rgba(33,84,239,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;\n  }\n  .ps-tryon-history-tryon-badge {\n    display: inline-block; font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);\n    background: rgba(33,84,239,0.12); border: 1px solid rgba(33,84,239,0.25);\n    border-radius: 0.25vw; padding: 0.1vw 0.35vw; margin-top: 0.25vw;\n  }\n\n  /* Quiz view */\n  .ps-tryon-quiz-progress { display: flex; gap: 0.4vw; margin-bottom: 1vw; }\n  .ps-tryon-quiz-progress-dot {\n    width: 1.5vw; height: 0.2vw; border-radius: 0.1vw;\n    background: var(--ps-border-color); transition: background 0.3s;\n  }\n  .ps-tryon-quiz-progress-dot.ps-active { background: var(--ps-accent); }\n  .ps-tryon-quiz-basics { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; }\n  .ps-tryon-quiz-options { display: flex; flex-direction: column; gap: 0.5vw; width: 100%; }\n  .ps-tryon-quiz-options.ps-tryon-quiz-row { flex-direction: row; }\n  .ps-tryon-quiz-option {\n    display: flex; flex-direction: column; gap: 0.15vw;\n    padding: 0.7vw 1vw; border: 1.5px solid var(--ps-border-color); border-radius: 0.5vw;\n    background: transparent; color: var(--ps-text-primary); cursor: pointer;\n    font-family: inherit; text-align: left; transition: all 0.2s;\n    flex: 1;\n  }\n  .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(33,84,239,0.12); }\n  .ps-tryon-quiz-option-label { font-size: 0.8vw; font-weight: 600; }\n  .ps-tryon-quiz-option-desc { font-size: 0.6vw; color: var(--ps-text-secondary); }\n\n  /* Profile edit view */\n  .ps-tryon-profile-edit { display: flex; flex-direction: column; gap: 1.2vw; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; padding: 0.3vw 0.5vw; flex: 1; }\n  .ps-tryon-pe-row {\n    display: flex; align-items: center; gap: 0.8vw;\n  }\n  .ps-tryon-pe-pill {\n    display: inline-flex; border: 1px solid var(--ps-border-color); border-radius: 1.2vw; overflow: hidden;\n  }\n  .ps-tryon-pe-pill-btn {\n    padding: 0.35vw 0.9vw; background: transparent; border: none;\n    color: var(--ps-text-muted); font-size: 0.62vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; transition: all 0.15s; white-space: nowrap; line-height: 1.2;\n  }\n  .ps-tryon-pe-pill-btn.ps-active { background: var(--ps-accent); color: #fff; }\n  .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.03); }\n  .ps-tryon-pe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 1.6vw; width: 100%; box-sizing: border-box; }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-field {\n    min-width: 0; padding: 0.15vw 0.4vw;\n    display: flex; align-items: center; gap: 0.6vw;\n  }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-label {\n    flex-shrink: 0; margin: 0; white-space: nowrap;\n    font-size: 0.62vw; color: var(--ps-text-secondary);\n  }\n  .ps-tryon-pe-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label { color: var(--ps-accent); }\n  .ps-tryon-pe-fields .ps-tryon-sf-input {\n    flex: 1; min-width: 0; padding: 0.3vw 0; font-size: 0.78vw;\n  }\n  .ps-tryon-pe-error {\n    font-size: 0.62vw; color: var(--ps-error-color); font-weight: 500; text-align: center;\n    padding: 0.3vw 0.6vw; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);\n    border-radius: 0.4vw;\n  }\n  .ps-tryon-pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw; margin-top: auto; padding-top: 1.2vw; }\n  .ps-tryon-pe-actions .ps-tryon-est-back { font-size: 0.65vw; }\n  .ps-tryon-pe-save {\n    padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #fff; border: none;\n    border-radius: 0.4vw; font-size: 0.65vw; font-weight: 600; cursor: pointer;\n    font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase;\n    display: inline-flex; align-items: center; gap: 0.3vw;\n  }\n  .ps-tryon-pe-save:hover { opacity: 0.85; }\n  .ps-tryon-drawer-create {\n    width: 100%; padding: 0.6vw; margin-bottom: 0.5vw;\n    background: transparent; border: 1.5px dashed var(--ps-border-color);\n    border-radius: 0.5vw; color: var(--ps-accent); font-size: 0.73vw;\n    font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;\n    display: flex; align-items: center; justify-content: center; gap: 0.3vw;\n  }\n  .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }\n  .ps-tryon-drawer-clear {\n    background: none; border: none; color: var(--ps-text-muted); font-size: 0.6vw;\n    font-weight: 500; cursor: pointer; font-family: inherit; padding: 0.3vw 0;\n    transition: color 0.2s; align-self: center;\n  }\n  .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }\n\n  /* Profile detail modal */\n  .ps-tryon-detail-overlay {\n    position: fixed; inset: 0; background: rgba(0,0,0,0.55);\n    display: flex; align-items: center; justify-content: center;\n    z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;\n  }\n  .ps-tryon-detail-modal {\n    background: var(--ps-bg-primary); border-radius: 0.83vw; width: 100%; max-width: 23vw; max-height: 85vh;\n    overflow-y: auto; box-shadow: 0 1.67vw 3.33vw rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;\n    font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);\n  }\n  .ps-tryon-detail-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 0.94vw 1.25vw; border-bottom: 1px solid var(--ps-border-color);\n  }\n  .ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }\n  .ps-tryon-detail-header button { background: none; border: none; color: var(--ps-text-secondary); cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }\n  .ps-tryon-detail-header button:hover { background: rgba(0,0,0,0.06); }\n  .ps-tryon-detail-body { padding: 1.04vw 1.25vw; }\n  .ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); margin-bottom: 0.73vw; }\n  .ps-tryon-detail-gender svg { stroke: var(--ps-accent); fill: none; }\n  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.52vw; margin-bottom: 0.83vw; }\n  .ps-tryon-detail-cell { background: var(--ps-bg-secondary); border-radius: 0.52vw; padding: 0.63vw 0.73vw; }\n  .ps-tryon-detail-cell-label { font-size: 0.57vw; color: var(--ps-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.21vw; }\n  .ps-tryon-detail-cell-value { font-size: 0.83vw; font-weight: 600; color: var(--ps-text-primary); }\n  .ps-tryon-detail-date { font-size: 0.57vw; color: var(--ps-text-muted); text-align: center; margin-top: 0.42vw; }\n  .ps-tryon-detail-delete {\n    width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.31vw;\n    padding: 0.63vw; border: 1px solid var(--ps-border-color); border-radius: 0.52vw; background: none;\n    color: var(--ps-error-color); font-size: 0.68vw; font-weight: 500; cursor: pointer; transition: all 0.2s;\n    font-family: inherit; margin-top: 0.83vw;\n  }\n  .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: var(--ps-error-color); }\n  .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Mobile (\u2264768px) \u2014 full-screen drawer, bigger touch targets,\n     px-based sizing (vw becomes sub-pixel and unreadable on phones)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  @media (max-width: 768px) {\n    /* \u2500\u2500 Trigger button: minimum 44px touch target, readable text \u2500\u2500 */\n    .ps-tryon-btn {\n      padding: 12px 20px; font-size: 14px; gap: 8px;\n      border-radius: 8px; min-height: 44px;\n    }\n    .ps-tryon-btn svg { width: 18px; height: 18px; }\n\n    /* \u2500\u2500 Overlay: full screen, no centering, slide-up drawer feel \u2500\u2500 */\n    .ps-tryon-overlay {\n      padding: 0 !important;\n      align-items: stretch !important; justify-content: stretch !important;\n      overflow: hidden !important;\n    }\n\n    /* \u2500\u2500 Modal: occupies entire viewport as a drawer \u2500\u2500 */\n    .ps-tryon-modal,\n    .ps-tryon-modal-wide {\n      max-width: 100vw !important; max-width: 100dvw !important;\n      max-height: 100vh !important; max-height: 100dvh !important;\n      width: 100vw !important; width: 100dvw !important;\n      height: 100vh !important; height: 100dvh !important;\n      min-height: 100vh !important; min-height: 100dvh !important;\n      border-radius: 0 !important; box-shadow: none !important;\n      margin: 0 !important;\n      display: flex !important; flex-direction: column !important;\n      overflow: hidden !important;\n      animation: ps-mobile-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);\n      padding-top: env(safe-area-inset-top);\n      padding-bottom: env(safe-area-inset-bottom);\n      padding-left: env(safe-area-inset-left);\n      padding-right: env(safe-area-inset-right);\n    }\n    .ps-tryon-modal > :last-child { flex: 1; min-height: 0; }\n\n    /* \u2500\u2500 Header: bigger touch targets, fixed top \u2500\u2500 */\n    .ps-tryon-header {\n      border-radius: 0 !important;\n      padding: 10px 14px !important;\n      flex-shrink: 0;\n      background: var(--ps-modal-header-bg, rgba(255,255,255,0.95)) !important;\n    }\n    .ps-tryon-header-icon {\n      width: 40px !important; height: 40px !important;\n      border-radius: 10px !important;\n    }\n    .ps-tryon-header-icon svg { width: 18px !important; height: 18px !important; }\n    .ps-tryon-close { width: 40px !important; height: 40px !important; border-radius: 10px !important; }\n    .ps-tryon-close svg { width: 22px !important; height: 22px !important; }\n\n    /* \u2500\u2500 Body: scrollable, comfortable padding, momentum scroll \u2500\u2500 */\n    .ps-tryon-body {\n      padding: 16px !important;\n      flex: 1 !important; min-height: 0 !important;\n      overflow-y: auto !important; overflow-x: hidden !important;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    /* \u2500\u2500 Back button: bigger, easier to tap \u2500\u2500 */\n    .ps-tryon-back-btn {\n      font-size: 14px !important; gap: 6px !important;\n      margin-bottom: 12px !important; padding: 6px 0 !important;\n    }\n    .ps-tryon-back-btn svg { width: 18px !important; height: 12px !important; }\n\n    /* \u2500\u2500 Preserve existing previews and modal-wide overrides \u2500\u2500 */\n    .ps-tryon-preview { height: 320px; }\n  }\n\n  @keyframes ps-mobile-slide-up {\n    from { transform: translateY(100%); opacity: 0.4; }\n    to   { transform: translateY(0);    opacity: 1;   }\n  }\n  @media (max-width: 720px) {\n    .ps-tryon-result-split { flex-direction: column; }\n    .ps-tryon-result-image-col { flex: none; }\n  }\n  @media (max-width: 480px) {\n    .ps-tryon-body { padding: 18px; }\n    .ps-tryon-header { padding: 14px 18px; }\n    .ps-tryon-stepper { padding: 14px 18px 8px; }\n    .ps-tryon-stepper-circle { width: 24px; height: 24px; font-size: 10px; }\n    .ps-tryon-stepper-label { font-size: 9px; }\n    .ps-tryon-features { flex-direction: column; gap: 8px; }\n    .ps-tryon-feature { flex-direction: row; gap: 10px; text-align: left; }\n    .ps-tryon-feature-icon { margin-bottom: 0; }\n    .ps-tryon-input-row { flex-wrap: wrap; }\n    .ps-tryon-input-row label { min-width: 100%; margin-bottom: -4px; }\n    .ps-tryon-drawer { padding: 16px; }\n    .ps-tryon-detail-grid { gap: 8px; }\n    .ps-tryon-detail-cell { padding: 10px 12px; }\n    .ps-tryon-detail-cell-value { font-size: 14px; }\n    .ps-tryon-detail-modal { max-width: 100%; }\n    .ps-tryon-header-icon { width: 30px; height: 30px; border-radius: 8px; }\n    .ps-tryon-back-btn { font-size: 13px; gap: 6px; margin-bottom: 10px; }\n    .ps-tryon-back-btn svg { width: 16px; height: 10px; }\n    .ps-tryon-sr-fit-table { font-size: 14px; margin-top: 12px; }\n    .ps-tryon-sr-fit-table thead th { font-size: 11px; padding: 4px 0 8px; }\n    .ps-tryon-sr-fit-table td { padding: 12px 0; }\n    .ps-tryon-sr-fit-status { font-size: 10px; padding: 3px 6px; }\n    .ps-tryon-sr-fit-area { font-size: 14px; }\n    .ps-tryon-sr-fit-range { font-size: 14px; }\n    .ps-tryon-upload-modal { width: 90%; max-width: none; padding: 18px; border-radius: 14px; gap: 12px; }\n    .ps-tryon-upload-modal-header h3 { font-size: 15px; }\n    .ps-tryon-upload-modal-close { font-size: 22px; }\n    .ps-tryon-upload-modal-dropzone { padding: 24px; min-height: 120px; border-radius: 10px; }\n    .ps-tryon-upload-modal-dropzone p { font-size: 14px; }\n    .ps-tryon-upload-modal-dropzone span { font-size: 11px; }\n    .ps-tryon-upload-modal-preview { max-height: 200px; border-radius: 10px; }\n    .ps-tryon-upload-modal-preview img { max-height: 200px; }\n    .ps-tryon-upload-modal-remove { width: 24px; height: 24px; font-size: 14px; top: 6px; right: 6px; }\n    /* Multi-section mobile */\n    .ps-tryon-sr-split-multi { grid-template-columns: 1fr; }\n    .ps-tryon-sr-img-col-small { max-height: 200px; }\n    .ps-tryon-sr-multi-title { font-size: 16px; }\n    .ps-tryon-sr-picker { gap: 12px; padding: 4px; }\n    .ps-tryon-sec-row { gap: 8px; }\n    .ps-tryon-sec-bigcard:not(.ps-has-img) { padding: 16px 10px; gap: 6px; min-height: 180px; }\n    .ps-tryon-sec-bigcard { border-radius: 10px; }\n    .ps-tryon-sec-bigcard-content { padding: 12px 8px; }\n    .ps-tryon-sec-bigcard-bg { border-radius: 10px 10px 0 0; }\n    .ps-tryon-sec-bigcard-icon { width: 48px; height: 48px; }\n    .ps-tryon-sec-bigcard-icon svg { width: 26px; height: 26px; }\n    .ps-tryon-sec-bigcard-name { font-size: 13px; }\n    .ps-tryon-sec-bigcard-size { font-size: 28px; }\n    .ps-tryon-sec-bigcard-badge { font-size: 9px; padding: 2px 6px; }\n    .ps-tryon-sec-bigcard-fit { font-size: 10px; }\n    .ps-tryon-sec-detail-back { font-size: 13px; gap: 5px; }\n    .ps-tryon-sec-detail-back svg { width: 14px; height: 14px; }\n    .ps-tryon-sec-detail-header { gap: 10px; padding-bottom: 8px; }\n    .ps-tryon-sec-detail-icon { width: 38px; height: 38px; }\n    .ps-tryon-sec-detail-icon svg { width: 22px; height: 22px; }\n    .ps-tryon-sec-detail-name { font-size: 16px; }\n    .ps-tryon-section-name { font-size: 14px; }\n    .ps-tryon-section-size { font-size: 18px; gap: 6px; }\n    .ps-tryon-section-rec-badge,\n    .ps-tryon-section-notrec-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; }\n    .ps-tryon-sec-detail .ps-tryon-sr-size-letter { font-size: 32px; }\n    .ps-tryon-sec-detail .ps-tryon-sr-chip { min-width: 36px; height: 36px; font-size: 13px; }\n    .ps-tryon-sec-length-row { gap: 8px; padding: 6px 0; }\n    .ps-tryon-sec-length-label { font-size: 11px; }\n    /* Body type cards mobile */\n    .ps-tryon-bodytype-cards { gap: 6px; }\n    .ps-tryon-bodytype-card { padding: 8px 4px; border-radius: 8px; }\n    .ps-tryon-bodytype-label { font-size: 10px; }\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Body Profile Onboarding (ps-bp-*)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n  /* Wrapper for title + split layout */\n  .ps-bp-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }\n  .ps-bp-shapes-header { flex-shrink: 0; margin-bottom: 0.6vw; text-align: left; }\n  .ps-bp-shapes-header .ps-bp-title { font-size: 1vw; font-weight: 600; }\n  .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: var(--ps-text-muted); font-weight: 400; }\n\n  /* Split layout: product left, form right \u2014 FIXED vh height, never changes */\n  .ps-bp-layout {\n    display: flex; gap: 1.2vw; flex: 1; min-height: 0;\n    overflow: hidden; align-items: center;\n  }\n  .ps-bp-image {\n    flex: 0 0 43%; min-width: 0;\n    height: 100%;\n    background: var(--ps-bg-primary);\n    border-radius: 0.9vw; overflow: hidden;\n    display: flex;\n  }\n  .ps-bp-image-img {\n    width: 100%; height: 100%; object-fit: cover; object-position: center top; flex: 1;\n  }\n  /* Upload zone \u2014 same element as .ps-bp-image, dashed border + centered content, full height */\n  .ps-bp-image.ps-bp-upload-zone {\n    cursor: pointer; border: 2px dashed var(--ps-border-color);\n    align-self: stretch; align-items: center; justify-content: center;\n  }\n  .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.04); }\n  .ps-bp-upload-placeholder {\n    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vw;\n    color: var(--ps-text-muted);\n  }\n  .ps-bp-upload-placeholder svg { width: 2.5vw; height: 2.5vw; stroke: var(--ps-accent); opacity: 0.7; }\n  .ps-bp-upload-text { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-secondary); }\n  .ps-bp-upload-hint { font-size: 0.68vw; color: var(--ps-text-muted); }\n\n  .ps-bp-image-remove {\n    position: absolute; top: 0.5vw; right: 0.5vw;\n    width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;\n    background: rgba(0,0,0,0.6); border: none; border-radius: 50%;\n    color: var(--ps-text-primary); font-size: 1vw; cursor: pointer; line-height: 1;\n    transition: background 0.15s; z-index: 2;\n  }\n  .ps-bp-image-remove:hover { background: rgba(0,0,0,0.8); }\n\n  .ps-bp-root {\n    flex: 1; min-width: 0;\n    display: flex; flex-direction: column; gap: 0.6vw; padding: 0.2vw 0.5vw 0.3vw 0;\n    height: 100%; max-height: 100%; overflow: hidden;\n    justify-content: center;\n  }\n\n  /* Step dots */\n  .ps-bp-dots {\n    display: flex; align-items: center; justify-content: center; gap: 0.4vw;\n  }\n  .ps-bp-dot {\n    width: 0.42vw; height: 0.42vw; border-radius: 50%; background: var(--ps-border-color);\n    transition: all 0.3s ease;\n  }\n  .ps-bp-dot-done { background: var(--ps-accent); }\n  .ps-bp-dot-active {\n    background: var(--ps-accent); width: 1.2vw; border-radius: 0.25vw;\n  }\n\n  /* Step container + animation \u2014 fade only, no layout shift */\n  .ps-bp-step { display: flex; flex-direction: column; gap: 1vw; flex: 1; min-height: 0; margin-top: 3vw; }\n  .ps-bp-step-enter { animation: ps-bp-fade 0.25s ease both; }\n  @keyframes ps-bp-fade {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  /* Typography */\n  .ps-bp-title {\n    font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0; letter-spacing: -0.02em; text-align: center;\n  }\n  .ps-bp-subtitle {\n    font-size: 0.78vw; color: var(--ps-text-secondary); margin: -0.4vw 0 0; text-align: center;\n  }\n\n  /* Unit system toggle (Imperial / Metric) */\n  .ps-bp-system-toggle {\n    display: flex; justify-content: center; gap: 1.5vw; margin: 0.3vw 0;\n  }\n  .ps-bp-system-btn {\n    background: none; border: none; padding: 0.2vw 0;\n    font-size: 0.78vw; font-weight: 500; color: var(--ps-text-muted);\n    cursor: pointer; font-family: inherit;\n    border-bottom: 2px solid transparent; transition: all 0.2s;\n  }\n  .ps-bp-system-btn:hover { color: var(--ps-text-secondary); }\n  .ps-bp-system-active {\n    color: var(--ps-text-primary); border-bottom-color: var(--ps-accent);\n  }\n\n  /* Inline field rows (WAIR style) */\n  .ps-bp-inline-fields {\n    display: flex; flex-direction: column; gap: 0; flex: 1;\n    justify-content: center;\n  }\n  .ps-bp-inline-row {\n    display: flex; align-items: center; gap: 1vw;\n    padding: 1vw 0;\n  }\n  .ps-bp-inline-label {\n    flex: 0 0 5.5vw; font-size: 0.68vw; font-weight: 700;\n    color: var(--ps-text-muted); letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n  .ps-bp-inline-input-group {\n    flex: 1; display: flex; align-items: center; gap: 0.4vw;\n  }\n  .ps-bp-inline-input {\n    flex: 1; min-width: 0; padding: 0;\n    background: transparent; border: none; border-bottom: 1px solid var(--ps-border-color);\n    color: var(--ps-text-primary); font-size: 1.1vw; font-weight: 500;\n    font-family: inherit; outline: none;\n    padding-bottom: 0.2vw; transition: border-color 0.2s;\n  }\n  .ps-bp-inline-input:focus { border-bottom-color: var(--ps-accent); }\n  .ps-bp-inline-input::placeholder { color: var(--ps-text-muted); font-weight: 400; }\n  .ps-bp-inline-input::-webkit-outer-spin-button,\n  .ps-bp-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n  .ps-bp-inline-input[type=\"number\"] { -moz-appearance: textfield; }\n  .ps-bp-inline-unit {\n    font-size: 0.73vw; color: var(--ps-text-muted); font-weight: 500;\n    flex-shrink: 0;\n  }\n\n  /* Photo CTA link */\n  .ps-bp-photo-cta {\n    display: flex; align-items: center; gap: 0.5vw;\n    background: none; border: none; padding: 0.6vw 0;\n    color: var(--ps-accent); font-size: 0.78vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.2s;\n    margin-top: 0.3vw;\n  }\n  .ps-bp-photo-cta:hover { color: var(--ps-accent-hover); }\n  .ps-bp-photo-cta svg { width: 1vw; height: 1vw; stroke: currentColor; flex-shrink: 0; }\n  .ps-bp-photo-cta-arrow { font-size: 0.9vw; transition: transform 0.2s; }\n  .ps-bp-photo-cta:hover .ps-bp-photo-cta-arrow { transform: translateX(3px); }\n  .ps-bp-photo-cta-done { color: var(--ps-success-color); }\n  .ps-bp-photo-cta-done:hover { color: var(--ps-text-muted); }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     Mobile basics step (BasicsStepMobile.tsx) \u2014 matches the reference\n     design: product image at top, big editable numbers, RECOMMENDED\n     upload card. NOT a slider \u2014 the values are real number inputs\n     styled to look like big plain text, so the OS keyboard pops the\n     digit pad on iOS/Android.\n     These styles are scoped to .ps-bpm-* so they don't conflict with\n     the existing desktop .ps-bp-* layout.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-bpm-root {\n    display: flex; flex-direction: column;\n    gap: 10px; padding: 8px 4px 0;\n    flex: 1; min-height: 0;\n  }\n  .ps-bpm-spacer { flex: 1 1 auto; min-height: 8px; }\n  .ps-bpm-header { text-align: center; margin: 4px 0 0; }\n  .ps-bpm-title {\n    font-size: 18px; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0 0 4px; line-height: 1.3;\n  }\n  .ps-bpm-subtitle {\n    font-size: 12px; color: var(--ps-text-muted);\n    margin: 0 auto; max-width: 260px; line-height: 1.45; font-weight: 400;\n  }\n\n  /* Metric / Imperial pill toggle */\n  .ps-bpm-toggle {\n    display: flex; justify-content: center; gap: 24px;\n    margin: 2px 0 4px;\n  }\n  .ps-bpm-toggle-btn {\n    background: none; border: none; padding: 6px 4px;\n    font-family: inherit; font-size: 12px; font-weight: 600;\n    letter-spacing: 0.06em;\n    color: var(--ps-text-muted); cursor: pointer;\n    border-bottom: 1.5px solid transparent;\n    transition: all 0.2s;\n  }\n  .ps-bpm-toggle-btn.ps-active {\n    color: var(--ps-accent);\n    border-bottom-color: var(--ps-accent);\n  }\n\n  /* Slider rows \u2014 label top-left, value top-right, then [-] [track] [+] */\n  .ps-bpm-fields {\n    display: flex; flex-direction: column;\n    margin-top: 4px;\n  }\n  .ps-bpm-row {\n    display: flex; flex-direction: column;\n    padding: 14px 4px;\n    gap: 12px;\n    border-bottom: 1px solid var(--ps-border-subtle);\n  }\n  .ps-bpm-row:last-child { border-bottom: none; }\n  .ps-bpm-row-top {\n    display: flex; align-items: center; justify-content: space-between;\n  }\n  .ps-bpm-label {\n    font-size: 11px; font-weight: 600;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    color: var(--ps-text-muted);\n  }\n  .ps-bpm-value-display {\n    font-size: 14px; font-weight: 700;\n    color: var(--ps-text-primary);\n    font-feature-settings: \"tnum\" 1;\n  }\n\n  /* Slider row container: [-] [track] [+] */\n  .ps-bpm-slider-row {\n    display: flex; align-items: center; gap: 12px;\n  }\n  .ps-bpm-step-btn {\n    flex-shrink: 0;\n    width: 34px; height: 34px; border-radius: 50%;\n    background: var(--ps-bg-tertiary); border: none;\n    display: flex; align-items: center; justify-content: center;\n    cursor: pointer;\n    color: var(--ps-text-secondary);\n    transition: background 0.15s, transform 0.1s;\n  }\n  .ps-bpm-step-btn:hover { background: var(--ps-border-color); }\n  .ps-bpm-step-btn:active { transform: scale(0.92); }\n\n  /* The slider \u2014 thicker track, dark navy thumb, monochrome */\n  .ps-bpm-slider {\n    -webkit-appearance: none; appearance: none;\n    flex: 1; min-width: 0;\n    height: 4px; outline: none;\n    background: linear-gradient(\n      to right,\n      var(--ps-text-primary) 0%,\n      var(--ps-text-primary) var(--ps-pct, 0%),\n      var(--ps-border-color) var(--ps-pct, 0%),\n      var(--ps-border-color) 100%\n    );\n    border-radius: 999px; cursor: pointer;\n    margin: 0;\n  }\n  .ps-bpm-slider::-webkit-slider-thumb {\n    -webkit-appearance: none; appearance: none;\n    width: 18px; height: 18px; border-radius: 50%;\n    background: var(--ps-text-primary); border: none;\n    cursor: grab; transition: transform 0.15s ease;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n  }\n  .ps-bpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }\n  .ps-bpm-slider::-moz-range-thumb {\n    width: 18px; height: 18px; border-radius: 50%;\n    background: var(--ps-text-primary); border: none; cursor: grab;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.18);\n  }\n  .ps-bpm-slider::-moz-range-track { background: transparent; height: 4px; }\n\n  /* \"or\" divider \u2014 flanked by hairlines */\n  .ps-bpm-or {\n    display: flex; align-items: center; gap: 12px;\n    margin: 14px 4px 4px;\n  }\n  .ps-bpm-or::before, .ps-bpm-or::after {\n    content: \"\"; flex: 1; height: 1px;\n    background: var(--ps-border-subtle);\n  }\n  .ps-bpm-or span {\n    font-size: 10px; font-weight: 600;\n    text-transform: uppercase; letter-spacing: 0.16em;\n    color: var(--ps-text-muted);\n  }\n\n  /* Minimal upload link \u2014 no card, no background, just text + icons */\n  .ps-bpm-upload-link {\n    display: flex; align-items: center; justify-content: center; gap: 10px;\n    background: none; border: none;\n    padding: 8px 4px; margin: 0;\n    cursor: pointer; font-family: inherit;\n    color: var(--ps-text-primary); font-size: 13px; font-weight: 500;\n    width: 100%;\n    transition: opacity 0.15s;\n  }\n  .ps-bpm-upload-link:hover { opacity: 0.7; }\n  .ps-bpm-upload-link svg { color: var(--ps-text-secondary); flex-shrink: 0; }\n\n  .ps-bpm-error {\n    font-size: 11px; color: var(--ps-error-color);\n    text-align: center; margin: 4px 0 0;\n  }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PhotoStepMobile (.ps-pm-*) \u2014 AI scan / photo upload step.\n     Title + subtitle, large photo preview, \"Checklist for accuracy\"\n     card, dark primary CTA, outlined RETAKE secondary, bottom tabs.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-pm-root {\n    display: flex; flex-direction: column;\n    gap: 14px; padding: 8px 4px 0;\n    flex: 1; min-height: 0;\n  }\n  .ps-pm-header { margin: 4px 0 0; }\n  .ps-pm-title {\n    font-size: 22px; font-weight: 700; color: var(--ps-text-primary);\n    margin: 0 0 6px; line-height: 1.25;\n  }\n  .ps-pm-subtitle {\n    font-size: 13px; color: var(--ps-text-muted);\n    margin: 0; line-height: 1.45; font-weight: 400;\n  }\n\n  /* Photo preview / upload zone */\n  .ps-pm-preview {\n    background: var(--ps-bg-tertiary);\n    border-radius: 10px;\n    height: 280px;\n    overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n    position: relative;\n    flex-shrink: 0;\n  }\n  .ps-pm-preview-img {\n    max-width: 100%; max-height: 100%;\n    width: auto; height: 100%;\n    object-fit: contain; display: block;\n  }\n  .ps-pm-preview-empty {\n    display: flex; flex-direction: column; align-items: center;\n    gap: 6px; padding: 24px;\n    background: none; border: none;\n    color: var(--ps-text-muted); cursor: pointer;\n    font-family: inherit; width: 100%; height: 100%;\n  }\n  .ps-pm-preview-empty svg { color: var(--ps-text-muted); }\n  .ps-pm-preview-empty-title {\n    font-size: 14px; font-weight: 600; color: var(--ps-text-secondary);\n    margin-top: 4px;\n  }\n  .ps-pm-preview-empty-hint {\n    font-size: 11px; color: var(--ps-text-muted);\n  }\n  .ps-pm-preview-remove {\n    position: absolute; top: 10px; right: 10px;\n    width: 28px; height: 28px; border-radius: 6px;\n    background: rgba(255,255,255,0.9); border: none;\n    color: var(--ps-text-primary); cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n    transition: background 0.15s;\n  }\n  .ps-pm-preview-remove:hover { background: #FFFFFF; }\n\n  /* Checklist for accuracy card */\n  .ps-pm-checklist {\n    display: flex; gap: 12px;\n    padding: 12px 14px;\n    background: var(--ps-bg-secondary);\n    border-radius: 10px;\n    border: 1px solid var(--ps-border-subtle);\n  }\n  .ps-pm-checklist-icon {\n    flex-shrink: 0;\n    width: 22px; height: 22px;\n    color: var(--ps-text-primary);\n    display: flex; align-items: center; justify-content: center;\n    margin-top: 1px;\n  }\n  .ps-pm-checklist-body { flex: 1; min-width: 0; }\n  .ps-pm-checklist-title {\n    font-size: 12px; font-weight: 700;\n    color: var(--ps-text-primary);\n    margin-bottom: 5px;\n  }\n  .ps-pm-checklist-items {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .ps-pm-checklist-items li {\n    font-size: 11px; color: var(--ps-text-secondary);\n    padding: 1px 0 1px 12px;\n    position: relative; line-height: 1.5;\n  }\n  .ps-pm-checklist-items li::before {\n    content: \"\u2022\"; position: absolute; left: 2px;\n    color: var(--ps-text-muted);\n  }\n\n  /* Primary CTA: ANALYZE MY SIZE \u2014 uses the user's brand accent */\n  .ps-pm-primary-btn {\n    margin: 0 16px; width: calc(100% - 32px);\n    background: var(--ps-accent); color: #FFFFFF;\n    border: none; border-radius: 8px;\n    padding: 16px 18px;\n    font-family: inherit; font-size: 13px; font-weight: 700;\n    letter-spacing: 0.1em; text-transform: uppercase;\n    cursor: pointer;\n    transition: opacity 0.15s, transform 0.15s;\n  }\n  .ps-pm-primary-btn:active { transform: scale(0.98); }\n  .ps-pm-primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n  /* Outlined secondary: RETAKE PHOTO */\n  .ps-pm-secondary-btn {\n    margin: 8px 16px 12px; width: calc(100% - 32px);\n    background: transparent; color: var(--ps-text-secondary);\n    border: 1px solid var(--ps-border-color); border-radius: 8px;\n    padding: 13px 18px;\n    font-family: inherit; font-size: 11px; font-weight: 700;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    cursor: pointer;\n    transition: background 0.15s;\n  }\n  .ps-pm-secondary-btn:hover { background: var(--ps-bg-secondary); }\n\n  /* When the bottom action area contains the primary button (photo step),\n     it needs different padding than the basics step (which has the next btn\n     baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. */\n  .ps-bpm-bottom .ps-pm-primary-btn { margin: 14px 16px 0; }\n\n  /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MobileScanningView (.ps-msc-*) \u2014 AI scan processing screen.\n     Dark photo viewfinder with corner brackets, scanning line, pose\n     skeleton overlay, cycling stage text below with slide-fade.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n  .ps-msc-root {\n    display: flex; flex-direction: column;\n    gap: 18px; padding: 8px 4px 0;\n    flex: 1; min-height: 0;\n  }\n\n  /* The dark viewfinder containing the photo + overlays */\n  .ps-msc-viewfinder {\n    position: relative; flex-shrink: 0;\n    background: #0E0F11; border-radius: 12px; overflow: hidden;\n    height: 64vh; max-height: 540px; min-height: 360px;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .ps-msc-photo {\n    max-width: 100%; max-height: 100%;\n    width: auto; height: 100%;\n    object-fit: contain; display: block;\n    filter: brightness(0.9) contrast(1.05);\n  }\n\n  /* Live feed badge top-left */\n  .ps-msc-feed-badge {\n    position: absolute; top: 12px; left: 14px; z-index: 4;\n    display: flex; align-items: center; gap: 6px;\n    color: rgba(255,255,255,0.85);\n    font-size: 10px; font-weight: 600;\n    letter-spacing: 0.12em;\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  }\n  .ps-msc-feed-dot {\n    width: 7px; height: 7px; border-radius: 50%;\n    background: #ef4444;\n    box-shadow: 0 0 0 0 rgba(239,68,68,0.6);\n    animation: ps-msc-rec 1.4s ease-in-out infinite;\n  }\n  @keyframes ps-msc-rec {\n    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }\n    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(239,68,68,0); }\n  }\n\n  /* Corner brackets \u2014 four absolutely positioned L-shapes */\n  .ps-msc-corners {\n    position: absolute; inset: 28px;\n    pointer-events: none; z-index: 3;\n  }\n  .ps-msc-corner {\n    position: absolute;\n    width: 22px; height: 22px;\n    border: 1.5px solid rgba(255,255,255,0.7);\n  }\n  .ps-msc-corner.ps-tl { top: 0; left: 0; border-right: none; border-bottom: none; }\n  .ps-msc-corner.ps-tr { top: 0; right: 0; border-left: none; border-bottom: none; }\n  .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }\n  .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }\n\n  /* Scanning line that sweeps top-to-bottom */\n  .ps-msc-scanline {\n    position: absolute; left: 28px; right: 28px;\n    height: 1.5px; z-index: 3;\n    background: linear-gradient(\n      to right,\n      transparent,\n      rgba(180,220,255,0.85),\n      rgba(180,220,255,0.85),\n      transparent\n    );\n    box-shadow: 0 0 8px rgba(180,220,255,0.5);\n    animation: ps-msc-scan 2.6s ease-in-out infinite;\n  }\n  @keyframes ps-msc-scan {\n    0%   { top: 28px; opacity: 0; }\n    10%  { opacity: 1; }\n    90%  { opacity: 1; }\n    100% { top: calc(100% - 28px); opacity: 0; }\n  }\n\n  /* Pose skeleton overlay \u2014 sits over the photo */\n  .ps-msc-pose-wrap {\n    position: absolute; inset: 0; z-index: 2;\n    display: flex; align-items: center; justify-content: center;\n    pointer-events: none;\n  }\n  .ps-msc-pose-overlay {\n    width: 100%; height: 100%;\n  }\n  @keyframes ps-msc-fade {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  /* Bottom of viewfinder: stage label + progress bar + sub */\n  .ps-msc-vf-bottom {\n    position: absolute; left: 28px; right: 28px; bottom: 28px;\n    z-index: 4; text-align: center;\n    color: #FFFFFF;\n  }\n  .ps-msc-vf-text {\n    font-size: 10px; font-weight: 700;\n    letter-spacing: 0.16em;\n    color: rgba(255,255,255,0.9);\n    margin-bottom: 6px;\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  }\n  .ps-msc-vf-bar {\n    height: 2px; width: 100%;\n    background: rgba(255,255,255,0.18);\n    border-radius: 2px; overflow: hidden;\n  }\n  .ps-msc-vf-bar-fill {\n    height: 100%; width: 30%;\n    background: linear-gradient(to right, rgba(180,220,255,0.6), rgba(255,255,255,0.95));\n    border-radius: 2px;\n    animation: ps-msc-bar 2.2s ease-in-out infinite;\n  }\n  @keyframes ps-msc-bar {\n    0%   { transform: translateX(-100%); }\n    50%  { transform: translateX(150%); }\n    100% { transform: translateX(350%); }\n  }\n  .ps-msc-vf-sub {\n    margin-top: 8px;\n    font-size: 9px; font-weight: 600;\n    letter-spacing: 0.18em;\n    color: rgba(255,255,255,0.55);\n    font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  }\n\n  /* Cycling stage text below the viewfinder \u2014 slides + fades on change */\n  .ps-msc-stage {\n    text-align: center; padding: 4px 12px;\n    min-height: 64px;\n    overflow: hidden;\n  }\n  .ps-msc-stage-slot {\n    animation: ps-msc-stage-in 0.5s cubic-bezier(0.32, 0.72, 0, 1);\n  }\n  @keyframes ps-msc-stage-in {\n    from { opacity: 0; transform: translateY(14px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  .ps-msc-stage-title {\n    font-size: 16px; font-weight: 700;\n    letter-spacing: 0.06em;\n    color: var(--ps-text-primary);\n    margin-bottom: 6px;\n  }\n  .ps-msc-stage-desc {\n    font-size: 12px; color: var(--ps-text-muted);\n    line-height: 1.5; max-width: 300px; margin: 0 auto;\n  }\n\n  /* Bottom action area \u2014 Next button + tab bar grouped together,\n     pushed to the bottom of the modal body by .ps-bpm-spacer above. */\n  .ps-bpm-bottom {\n    display: flex; flex-direction: column;\n    margin: 0 -16px;\n    border-top: 1px solid var(--ps-border-subtle);\n    background: var(--ps-bg-primary);\n    flex-shrink: 0;\n    padding-bottom: env(safe-area-inset-bottom);\n  }\n  .ps-bpm-next-btn {\n    margin: 14px 16px 12px;\n    padding: 14px 18px;\n    background: var(--ps-accent); color: #FFFFFF;\n    border: none; border-radius: 10px;\n    font-family: inherit; font-size: 14px; font-weight: 700;\n    cursor: pointer; transition: opacity 0.15s, transform 0.15s;\n    letter-spacing: 0.02em;\n  }\n  .ps-bpm-next-btn:active { transform: scale(0.98); }\n  .ps-bpm-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n  .ps-bpm-bottom-tabs {\n    display: flex; align-items: stretch;\n    border-top: 1px solid var(--ps-border-subtle);\n    background: var(--ps-bg-primary);\n  }\n  .ps-bpm-bottom-tab {\n    flex: 1; background: none; border: none;\n    padding: 14px 8px 12px;\n    font-family: inherit; font-size: 10px; font-weight: 700;\n    letter-spacing: 0.12em; text-transform: uppercase;\n    color: var(--ps-text-muted); cursor: pointer;\n    border-bottom: 2px solid transparent;\n    transition: color 0.15s, border-color 0.15s;\n    display: flex; align-items: center; justify-content: center; gap: 6px;\n  }\n  .ps-bpm-bottom-tab.ps-active {\n    color: var(--ps-accent);\n    border-bottom-color: var(--ps-accent);\n  }\n  .ps-bpm-bottom-tab svg { width: 13px; height: 13px; flex-shrink: 0; }\n\n  .ps-bp-optional { font-weight: 400; color: var(--ps-text-muted); }\n\n  /* Bra size step \u2014 vertically centered */\n  .ps-bp-bra-step { display: flex; flex-direction: column; justify-content: center; flex: 1; }\n  .ps-bp-bra-step .ps-bp-title { text-align: center; margin-bottom: 1.5vw; }\n\n  /* Bra size selector */\n  .ps-bp-bra-section { margin-bottom: 1.2vw; }\n  .ps-bp-bra-header {\n    display: flex; align-items: center; justify-content: space-between;\n    margin-bottom: 0.5vw;\n  }\n  .ps-bp-bra-label {\n    font-size: 0.6vw; font-weight: 600; color: rgba(255,255,255,0.45);\n    letter-spacing: 0.08em; text-transform: uppercase;\n  }\n  /* Region dropdown */\n  .ps-bp-bra-region-wrap { position: relative; z-index: 100; }\n  .ps-bp-bra-region-trigger {\n    display: flex; align-items: center; gap: 0.35vw;\n    padding: 0.45vw 0.9vw; border: 1.5px solid rgba(0,0,0,0.1);\n    border-radius: 0.4vw; background: transparent;\n    color: var(--ps-text-secondary); font-size: 0.8vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; transition: all 0.25s;\n  }\n  .ps-bp-bra-region-trigger:hover { border-color: var(--ps-accent); color: var(--ps-accent); }\n  .ps-bp-bra-region-arrow {\n    font-size: 0.55vw; transition: transform 0.25s;\n  }\n  .ps-bp-bra-region-arrow.ps-open { transform: rotate(180deg); }\n  .ps-bp-bra-region-dropdown {\n    position: absolute; top: calc(100% + 0.3vw); right: 0;\n    min-width: 5vw; background: var(--ps-bg-secondary);\n    border: 1.5px solid rgba(0,0,0,0.08); border-radius: 0.4vw;\n    box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.5);\n    overflow: hidden; animation: ps-bp-fade 0.2s ease both;\n    padding: 0.25vw; z-index: 200;\n  }\n  .ps-bp-bra-region-item {\n    display: block; width: 100%; padding: 0.4vw 0.7vw;\n    background: transparent; border: none; border-radius: 0.3vw;\n    color: var(--ps-text-secondary); font-size: 0.75vw; font-weight: 600;\n    cursor: pointer; font-family: inherit; text-align: left;\n    transition: all 0.15s;\n  }\n  .ps-bp-bra-region-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }\n  .ps-bp-bra-region-item.ps-selected { color: var(--ps-accent); background: rgba(33,84,239,0.1); }\n  .ps-bp-bra-grid {\n    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35vw;\n  }\n  .ps-bp-bra-btn {\n    padding: 0.4vw 0; text-align: center;\n    background: transparent; border: 1px solid rgba(0,0,0,0.08);\n    border-radius: 0.35vw; color: var(--ps-text-secondary);\n    font-size: 0.65vw; font-weight: 500; cursor: pointer;\n    font-family: inherit; transition: all 0.2s;\n  }\n  .ps-bp-bra-btn:hover { border-color: rgba(0,0,0,0.3); color: var(--ps-text-primary); }\n  .ps-bp-bra-btn-selected {\n    background: var(--ps-accent) !important; border-color: var(--ps-accent) !important;\n    color: #fff !important; font-weight: 700;\n  }\n  /* Bra result */\n  .ps-bp-bra-result {\n    text-align: center; font-size: 0.85vw; color: rgba(0,0,0,0.5);\n    margin-top: 0.8vw; font-weight: 400;\n  }\n  .ps-bp-bra-result strong {\n    color: var(--ps-accent); font-weight: 700; font-size: 1vw;\n  }\n  .ps-bp-bra-bust {\n    display: block; margin-top: 0.2vw;\n    font-size: 0.75vw; color: rgba(0,0,0,0.3); font-weight: 400;\n  }\n\n  /* Profile option rows \u2014 WAIR style stacked list */\n  .ps-bp-options {\n    display: flex; flex-direction: column; gap: 0.5vw;\n    margin-top: 0.8vw;\n  }\n  .ps-bp-option {\n    display: flex; align-items: center; gap: 0.8vw;\n    padding: 0.35vw 1vw 0.35vw 0.35vw;\n    background: #fff; border: 1.5px solid rgba(0,0,0,0.06);\n    border-radius: 0.6vw; cursor: pointer;\n    transition: all 0.25s ease; font-family: inherit;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.05);\n  }\n  .ps-bp-option:hover {\n    border-color: rgba(33,84,239,0.5);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    transform: translateY(-1px);\n  }\n  .ps-bp-option:hover .ps-bp-illust svg { transform: scale(1.05); }\n  .ps-bp-option-selected {\n    border-color: var(--ps-accent) !important;\n    box-shadow: 0 4px 12px rgba(33,84,239,0.18) !important;\n  }\n  .ps-bp-option-icon {\n    width: 6vw; height: 6vw; flex-shrink: 0;\n    display: flex; align-items: center; justify-content: center;\n    border-radius: 0.4vw; overflow: hidden;\n  }\n  .ps-bp-illust { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }\n  .ps-bp-illust svg { width: 100%; height: 100%; transition: transform 0.25s ease; }\n  .ps-bp-option-label {\n    flex: 1; font-size: 0.73vw; font-weight: 500;\n    color: #555; text-align: center;\n  }\n  .ps-bp-option-selected .ps-bp-option-label { color: var(--ps-accent); font-weight: 600; }\n  .ps-bp-option::after {\n    content: \"\u203A\"; font-size: 1.1vw; color: var(--ps-text-secondary); flex-shrink: 0;\n    transition: all 0.25s ease;\n  }\n  .ps-bp-option:hover::after { color: var(--ps-accent); transform: translateX(2px); }\n  .ps-bp-option-selected::after { color: var(--ps-accent); }\n\n  /* Single question step \u2014 3 cards centered */\n  .ps-bp-single-q { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; }\n  .ps-bp-single-q .ps-bp-title { margin-bottom: 1vw; width: 100%; text-align: center; font-size: 1.05vw; font-weight: 700; letter-spacing: 0.01em; }\n  .ps-bp-shape-row-full { width: 100%; margin: 1.5vw auto 0; }\n  .ps-bp-shape-row-full .ps-bp-img-card { max-height: 18vw; padding: 0.8vw 0.6vw 0; }\n  .ps-bp-shape-row-full .ps-bp-img-card-thumb { height: 13vw; }\n\n  /* Body shapes screen \u2014 fit all questions without scrolling */\n  .ps-bp-shapes-fit { display: flex; flex-direction: column; flex: 1; overflow: hidden; gap: 0.4vw; justify-content: flex-start !important; }\n\n  /* Body shapes combined screen */\n  .ps-bp-shape-section {\n    margin-bottom: 0.4vw; flex: 1; display: flex; flex-direction: column; min-height: 0;\n  }\n  .ps-bp-shape-label {\n    font-size: 0.55vw; font-weight: 500; color: rgba(255,255,255,0.7);\n    margin-bottom: 0.3vw; display: flex; align-items: center; gap: 0.6vw;\n    text-transform: uppercase; letter-spacing: 0.05em;\n  }\n  .ps-bp-shape-label::after {\n    content: \"\"; flex: 1; height: 1px;\n    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);\n  }\n  .ps-bp-shape-row {\n    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5vw;\n    flex: 1; min-height: 0;\n  }\n  .ps-bp-img-card {\n    display: flex; flex-direction: column; align-items: center;\n    background: transparent; border: 2px solid rgba(0,0,0,0.08);\n    border-radius: 0.5vw; overflow: hidden; cursor: pointer;\n    transition: all 0.2s ease; padding: 0; font-family: inherit;\n    position: relative;\n  }\n  .ps-bp-img-card:hover {\n    border-color: rgba(33,84,239,0.4);\n    transform: translateY(-0.1vw);\n  }\n  .ps-bp-img-card-selected {\n    border-color: var(--ps-accent) !important;\n    border-width: 2.5px !important;\n  }\n  .ps-bp-img-card-selected .ps-bp-img-card-label {\n    font-weight: 700; color: var(--ps-accent);\n  }\n  .ps-bp-img-card-check {\n    display: none; position: absolute; top: 0.3vw; right: 0.3vw;\n    width: 1.1vw; height: 1.1vw; border-radius: 50%;\n    background: var(--ps-accent); align-items: center; justify-content: center;\n    z-index: 1;\n  }\n  .ps-bp-img-card-check svg { width: 0.6vw; height: 0.6vw; }\n  .ps-bp-img-card-selected .ps-bp-img-card-check { display: flex; }\n  .ps-bp-img-card .ps-bp-img-card-thumb { opacity: 1; }\n  .ps-bp-img-card-thumb {\n    width: 100%; flex: 1; min-height: 0; overflow: hidden;\n    display: flex; align-items: center; justify-content: center;\n    background: transparent;\n  }\n  .ps-bp-img-card-img {\n    width: 100%; height: 100%; object-fit: contain;\n  }\n  .ps-bp-img-card .ps-bp-illust { width: 80%; height: 80%; }\n  .ps-bp-img-card .ps-bp-illust svg { width: 100%; height: 100%; }\n  .ps-bp-img-card-label {\n    padding: 0.3vw 0.2vw; font-size: 0.6vw; font-weight: 600;\n    color: var(--ps-text-secondary); text-align: center; width: 100%;\n    transition: opacity 0.2s;\n  }\n  /* Hover hint text below cards */\n  .ps-bp-hover-hint {\n    text-align: center; font-size: 0.8vw; color: rgba(0,0,0,0.45);\n    margin: 0.15vw 0 0; min-height: 1em; transition: opacity 0.2s;\n    font-weight: 400; letter-spacing: 0.01em;\n  }\n\n  /* Photo upload */\n  .ps-bp-photo-upload {\n    display: flex; align-items: center; gap: 0.6vw;\n    width: 100%; padding: 0.7vw 0.8vw;\n    background: transparent; border: 1.5px dashed var(--ps-border-color);\n    border-radius: 0.5vw; cursor: pointer;\n    transition: all 0.2s; color: var(--ps-text-muted);\n    font-family: inherit; text-align: left;\n  }\n  .ps-bp-photo-upload:hover {\n    border-color: var(--ps-accent); background: rgba(33,84,239,0.04);\n    color: var(--ps-text-secondary);\n  }\n  .ps-bp-photo-upload svg { flex-shrink: 0; opacity: 0.6; }\n  .ps-bp-photo-upload-text { font-size: 0.78vw; font-weight: 500; }\n  .ps-bp-photo-upload-hint { font-size: 0.62vw; color: var(--ps-text-muted); margin-left: auto; }\n\n  .ps-bp-photo-preview {\n    display: flex; align-items: center; gap: 0.6vw;\n    padding: 0.5vw; border: 1.5px solid var(--ps-accent);\n    border-radius: 0.5vw; background: rgba(33,84,239,0.06);\n  }\n  .ps-bp-photo-thumb {\n    width: 2.8vw; height: 2.8vw; object-fit: cover;\n    border-radius: 0.4vw; flex-shrink: 0;\n  }\n  .ps-bp-photo-info { display: flex; flex-direction: column; gap: 0.1vw; flex: 1; min-width: 0; }\n  .ps-bp-photo-status {\n    font-size: 0.73vw; font-weight: 600; color: var(--ps-text-primary);\n    display: flex; align-items: center; gap: 0.3vw;\n  }\n  .ps-bp-photo-hint { font-size: 0.62vw; color: var(--ps-text-muted); }\n  .ps-bp-photo-remove {\n    width: 1.5vw; height: 1.5vw; display: flex; align-items: center; justify-content: center;\n    background: none; border: none; color: var(--ps-text-muted);\n    cursor: pointer; font-size: 1vw; line-height: 1; border-radius: 0.25vw;\n    transition: all 0.15s; flex-shrink: 0;\n  }\n  .ps-bp-photo-remove:hover { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); }\n\n  /* Error */\n  .ps-bp-error {\n    color: var(--ps-error-color); font-size: 0.73vw; margin: 0;\n  }\n\n  /* Navigation \u2014 back left, next right */\n  .ps-bp-nav {\n    display: flex; align-items: center; margin-top: auto;\n    justify-content: space-between;\n  }\n  .ps-bp-back-btn {\n    background: none; border: none; padding: 0;\n    color: var(--ps-text-muted); cursor: pointer;\n    font-size: 0.83vw; font-weight: 500; font-family: inherit;\n    white-space: nowrap; display: flex; align-items: center; gap: 0.3vw;\n    transition: color 0.2s;\n  }\n  .ps-bp-back-btn:hover { color: var(--ps-text-primary); }\n  .ps-bp-back-arrow {\n    display: inline-block; font-size: 1.1vw; transition: transform 0.25s ease;\n  }\n  .ps-bp-back-btn:hover .ps-bp-back-arrow { transform: translateX(-4px); }\n  .ps-bp-next-btn {\n    display: flex; align-items: center; gap: 0.5vw;\n    padding: 0.45vw 1.2vw;\n    background: var(--ps-accent); border: none; border-radius: 0.35vw;\n    color: #fff; font-size: 0.73vw; font-weight: 700;\n    cursor: pointer; transition: all 0.15s; font-family: inherit;\n    white-space: nowrap;\n  }\n  .ps-bp-next-btn svg { width: 0.75vw; height: 0.75vw; }\n  .ps-bp-next-btn:hover { background: var(--ps-accent-hover); }\n  .ps-bp-btn-disabled {\n    opacity: 0.35; cursor: not-allowed; pointer-events: none;\n  }\n\n  /* \u2500\u2500 Mobile responsive \u2500\u2500 */\n  @media (max-width: 768px) {\n    .ps-bp-layout { flex-direction: column; height: auto; gap: 0; overflow: visible; }\n    /* Desktop layout's product image \u2014 hidden on mobile because BasicsStepMobile\n       has its own minimal layout. The other steps (chest/midsection/hips) don't\n       need the giant left-column image on a phone either. */\n    .ps-bp-image { display: none !important; }\n    .ps-bp-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n    .ps-bp-layout { flex: 1; min-height: 0; }\n    /* Override desktop justify-content:center so BasicsStepMobile can\n       stretch to the bottom of the modal \u2014 its bottom action bar (Next +\n       tabs) needs to land at the bottom edge, not floating in the middle. */\n    .ps-bp-root {\n      justify-content: stretch !important;\n      height: auto !important;\n      max-height: none !important;\n      overflow: visible !important;\n      flex: 1 !important;\n    }\n    .ps-bp-upload-placeholder svg { width: 32px; height: 32px; }\n    .ps-bp-upload-text { font-size: 14px; }\n    .ps-bp-upload-hint { font-size: 11px; }\n    .ps-bp-root { padding: 16px; gap: 14px; overflow: visible; }\n    .ps-bp-dots { gap: 6px; }\n    .ps-bp-dot { width: 6px; height: 6px; }\n    .ps-bp-dot-active { width: 18px; border-radius: 4px; }\n    .ps-bp-title { font-size: 18px; }\n    .ps-bp-subtitle { font-size: 13px; margin-top: -4px; }\n    .ps-bp-system-toggle { gap: 20px; margin: 4px 0; }\n    .ps-bp-system-btn { font-size: 13px; }\n    .ps-bp-inline-row { padding: 14px 0; gap: 12px; }\n    .ps-bp-inline-label { flex: 0 0 70px; font-size: 11px; }\n    .ps-bp-inline-input { font-size: 18px; }\n    .ps-bp-inline-unit { font-size: 12px; }\n    .ps-bp-photo-cta { font-size: 13px; gap: 6px; margin-top: 4px; }\n    .ps-bp-photo-cta svg { width: 16px; height: 16px; }\n    .ps-bp-options { gap: 6px; }\n    .ps-bp-option { border-radius: 10px; padding: 6px 12px 6px 6px; gap: 10px; }\n    .ps-bp-option-icon { width: 70px; height: 70px; }\n    .ps-bp-option-label { font-size: 14px; }\n    .ps-bp-option::after { font-size: 18px; }\n    .ps-bp-option { padding: 14px 8px; border-radius: 10px; gap: 8px; }\n    .ps-bp-option-icon { width: 56px; height: 56px; }\n    .ps-bp-option-label { font-size: 13px; }\n    .ps-bp-error { font-size: 12px; }\n    .ps-bp-shape-section { margin-bottom: 12px; }\n    .ps-bp-shape-label { font-size: 13px; margin-bottom: 6px; }\n    .ps-bp-shape-row { gap: 6px; }\n    .ps-bp-img-card { border-radius: 8px; border-width: 2px; }\n    .ps-bp-img-card-label { font-size: 11px; padding: 4px 2px; }\n    .ps-bp-hover-hint { font-size: 10px; margin-top: 6px; }\n    .ps-bp-single-q .ps-bp-title { font-size: 13px; font-weight: 400; }\n    .ps-bp-photo-upload { padding: 10px 12px; gap: 8px; border-radius: 8px; }\n    .ps-bp-photo-upload-text { font-size: 13px; }\n    .ps-bp-photo-upload-hint { font-size: 10px; }\n    .ps-bp-photo-preview { padding: 8px; gap: 8px; border-radius: 8px; }\n    .ps-bp-photo-thumb { width: 40px; height: 40px; border-radius: 6px; }\n    .ps-bp-photo-status { font-size: 12px; gap: 4px; }\n    .ps-bp-photo-hint { font-size: 10px; }\n    .ps-bp-photo-remove { width: 22px; height: 22px; font-size: 16px; }\n    .ps-bp-nav { padding-top: 6px; }\n    .ps-bp-back-btn { font-size: 14px; }\n    .ps-bp-back-arrow { font-size: 18px; }\n    .ps-bp-next-btn {\n    display: flex; align-items: center; gap: 0.5vw; padding: 10px 16px; font-size: 13px; border-radius: 6px; }\n    .ps-bp-root { padding: 12px; overflow: hidden; }\n  }\n\n  /* Upload hover overlay */\n  .ps-tryon-upload-hover:hover .ps-tryon-upload-hover-overlay { opacity: 1 !important; }\n";

package/dist/react/views/MobileScanningView.d.ts

@@ -0,0 +1,11 @@
+import type { TranslateFn } from "../../i18n";
+import type { BodyLandmarks } from "../../pose-detect";
+interface MobileScanningViewProps {
+    previewUrl: string;
+    bodyLandmarks: BodyLandmarks | null | undefined;
+    sizingDone: boolean;
+    onSwitchToManual: () => void;
+    t: TranslateFn;
+}
+export declare function MobileScanningView({ previewUrl, bodyLandmarks, sizingDone, onSwitchToManual, t, }: MobileScanningViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

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