@primestyleai/tryon 3.15.0 → 3.17.0

package/dist/{index-B8Dg-nJ7.js → index-DvAzTRFF.js}

@@ -306,6 +306,7 @@ const en = {
   "tap to compare": "tap to compare",
   "Comparing size": "Comparing size",
   "Fit Analysis": "Fit Analysis",
+  "Show more": "Show more",
   "Done": "Done",
   // ── Try-on result ───────────────────────────────────
   "Try-on result": "Try-on result",

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-B8Dg-nJ7.js";
-import { P, b, T, d, r } from "./index-B8Dg-nJ7.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-DvAzTRFF.js";
+import { P, b, T, d, r } from "./index-DvAzTRFF.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-B8Dg-nJ7.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-DvAzTRFF.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -406,20 +406,6 @@ const FALLBACK_FIELDS_MALE = [
   { key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 81", category: "body" },
   { key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" }
 ];
-const SIZING_COUNTRIES = [
-  { code: "US", label: "United States" },
-  { code: "UK", label: "United Kingdom" },
-  { code: "EU", label: "Europe (EU)" },
-  { code: "FR", label: "France" },
-  { code: "IT", label: "Italy" },
-  { code: "DE", label: "Germany" },
-  { code: "ES", label: "Spain" },
-  { code: "JP", label: "Japan" },
-  { code: "CN", label: "China" },
-  { code: "KR", label: "South Korea" },
-  { code: "AU", label: "Australia" },
-  { code: "BR", label: "Brazil" }
-];
 const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
 const TOTAL_STEPS = 4;
 function detectLocale() {
@@ -840,7 +826,115 @@ function PrimeStyleTryonInner({
     }
     return formGender === "female" ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
   }, [sizeGuide, formGender]);
+  const computeSizingLocally = useCallback(() => {
+    if (sizingMethod !== "exact" || !sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return null;
+    const HEADER_MAP = {
+      chest: "chest",
+      bust: "bust",
+      waist: "waist",
+      hips: "hips",
+      hip: "hips",
+      shoulder: "shoulderWidth",
+      shoulders: "shoulderWidth",
+      "shoulder width": "shoulderWidth",
+      sleeve: "sleeveLength",
+      "sleeve length": "sleeveLength",
+      inseam: "inseam",
+      neck: "neckCircumference",
+      foot: "footLengthCm",
+      "foot length": "footLengthCm"
+    };
+    const INTL = /* @__PURE__ */ new Set(["eu", "us", "uk", "it", "fr", "de", "jp", "cn", "kr", "au", "br", "eur"]);
+    const userMeas = {};
+    for (const f of dynamicFields) {
+      if (f.unit === "size" || ["shoeEU", "shoeUS", "shoeUK"].includes(f.key)) continue;
+      const raw = formRef.current[f.key];
+      if (!raw) continue;
+      const v = parseFloat(raw);
+      if (isNaN(v)) continue;
+      userMeas[f.key] = sizingUnit === "in" ? inToCm(v) : v;
+    }
+    for (const k of ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"]) {
+      if (userMeas[k] || !formRef.current[k]) continue;
+      const v = parseFloat(formRef.current[k]);
+      if (!isNaN(v)) userMeas[k] = sizingUnit === "in" ? inToCm(v) : v;
+    }
+    if (Object.keys(userMeas).length === 0) return null;
+    let idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+    if (idx < 0) idx = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
+    if (idx < 0) {
+      const firstColVals = sizeGuide.rows.map((r) => r[0]?.trim() || "");
+      idx = firstColVals.some((v) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|\d{1,3})$/i.test(v)) ? 0 : 0;
+    }
+    const colMap = [];
+    const intlCols = [];
+    sizeGuide.headers.forEach((h, i) => {
+      if (i === idx) return;
+      const lower = h.toLowerCase().trim().replace(/\s*\(.*\)/, "");
+      const clean = lower.replace(/\s*size\s*/gi, "").trim();
+      if (INTL.has(clean)) {
+        intlCols.push({ hi: i, code: clean.toUpperCase() });
+        return;
+      }
+      let fk = HEADER_MAP[clean];
+      if (!fk) {
+        const pk = Object.keys(HEADER_MAP).find((k) => clean.includes(k));
+        if (pk) fk = HEADER_MAP[pk];
+      }
+      if (fk && userMeas[fk] !== void 0) colMap.push({ hi: i, formKey: fk, label: h.trim() });
+    });
+    if (colMap.length === 0) return null;
+    const parseRange = (cell) => {
+      const nums = cell.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
+      if (nums.length === 0) return null;
+      return { min: Math.min(...nums), max: Math.max(...nums) };
+    };
+    const scores = [];
+    for (const row of sizeGuide.rows) {
+      const label = row[idx] || "";
+      let fitting = 0;
+      let total = 0;
+      let dist = 0;
+      const details = [];
+      for (const col of colMap) {
+        const range = parseRange(row[col.hi] || "");
+        if (!range) continue;
+        total++;
+        const uv = userMeas[col.formKey];
+        const fit = uv >= range.min && uv <= range.max ? "good" : uv < range.min ? "tight" : "loose";
+        if (fit === "good") fitting++;
+        dist += Math.abs(uv - (range.min + range.max) / 2);
+        const dispVal = sizingUnit === "in" ? `${cmToIn(uv)} in` : `${Math.round(uv)} cm`;
+        const dispRange = sizingUnit === "in" ? `${cmToIn(range.min)}–${cmToIn(range.max)} in` : `${Math.round(range.min)}–${Math.round(range.max)} cm`;
+        details.push({ measurement: col.label, userValue: dispVal, chartRange: dispRange, fit });
+      }
+      if (total === 0) continue;
+      const intl = {};
+      for (const ic of intlCols) {
+        if (row[ic.hi]) intl[ic.code] = row[ic.hi];
+      }
+      scores.push({ label, fitting, total, dist, details, intl, row });
+    }
+    if (scores.length === 0) return null;
+    scores.sort((a, b) => b.fitting - a.fitting || a.dist - b.dist);
+    const best = scores[0];
+    const conf = best.fitting === best.total ? "high" : best.fitting >= best.total * 0.6 ? "medium" : "low";
+    return {
+      recommendedSize: best.label,
+      confidence: conf,
+      reasoning: `Based on your measurements, size ${best.label} is the best fit.`,
+      internationalSizes: best.intl,
+      matchDetails: best.details,
+      method: "deterministic"
+    };
+  }, [sizingMethod, sizeGuide, dynamicFields, sizingUnit]);
   const submitSizing = useCallback(async () => {
+    const localResult = computeSizingLocally();
+    if (localResult) {
+      setSizingResult(localResult);
+      setSizingLoading(false);
+      return;
+    }
     if (!apiRef.current) return;
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
@@ -899,7 +993,7 @@ function PrimeStyleTryonInner({
     } finally {
       setSizingLoading(false);
     }
-  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, computeSizingLocally]);
   const handleTryOnSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
       const msg = !apiRef.current ? t("SDK not configured. Please provide an API key.") : t("Something went wrong");
@@ -1339,10 +1433,6 @@ function PrimeStyleTryonInner({
           ")"
         ] }, p.id))
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: t("Sizing region") }),
-        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: t(c.label) }, c.code)) })
-      ] }),
       sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-tabs", children: [
         /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${isCm ? " ps-active" : ""}`, onClick: () => {
           setSizingUnit("cm");
@@ -1515,8 +1605,14 @@ function PrimeStyleTryonInner({
         foot: "footLengthCm",
         "foot length": "footLengthCm"
       };
-      const sizeColIdx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
-      const idx = sizeColIdx >= 0 ? sizeColIdx : 0;
+      let idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+      if (idx < 0) idx = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
+      if (idx < 0) {
+        const firstColVals = sizeGuide.rows.map((r) => r[0]?.trim() || "");
+        const looksLikeSize = firstColVals.some((v) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|\d{1,3})$/i.test(v));
+        idx = looksLikeSize ? 0 : -1;
+      }
+      if (idx < 0) idx = 0;
       const measCols = [];
       const intlCols = [];
       sizeGuide.headers.forEach((h, i) => {
@@ -1527,8 +1623,10 @@ function PrimeStyleTryonInner({
           intlCols.push({ headerIdx: i, code: clean.toUpperCase() });
         } else if (MEAS_MAP[clean]) {
           measCols.push({ headerIdx: i, label: h.trim(), formKey: MEAS_MAP[clean] });
-        } else if (lower !== "size") {
-          measCols.push({ headerIdx: i, label: h.trim(), formKey: lower.replace(/\s+/g, "") });
+        } else if (clean && clean !== "size") {
+          const partialKey = Object.keys(MEAS_MAP).find((k) => clean.includes(k));
+          const fk = partialKey ? MEAS_MAP[partialKey] : clean.replace(/\s+/g, "");
+          measCols.push({ headerIdx: i, label: h.trim(), formKey: fk });
         }
       });
       const sizes = sizeGuide.rows.map((row) => {
@@ -1547,7 +1645,7 @@ function PrimeStyleTryonInner({
         }
         return { label, measurements, intl };
       });
-      return { sizes, measCols, intlCols };
+      return { sizes: sizes.filter((s) => s.label.trim()), measCols, intlCols };
     }, [sizeGuide]);
     const getUserVal = useCallback((formKey2) => {
       const edited = editedValues[formKey2];
@@ -1599,13 +1697,30 @@ function PrimeStyleTryonInner({
             /* @__PURE__ */ jsx("div", { className: `ps-tryon-sr-hero-conf ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence === "high" ? t("High Confidence") : sizingResult.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence") })
           ] })
         ] }),
-        Object.keys(activeIntl).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: Object.entries(activeIntl).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-item", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-code", children: code }),
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-val", children: val })
-          ] }, code)) })
-        ] }),
+        Object.keys(activeIntl).length > 0 && (() => {
+          const PRIMARY_CODES = ["US", "UK", "EU", "IT", "FR", "DE"];
+          const primary = PRIMARY_CODES.filter((c) => activeIntl[c]).map((c) => ({ code: c, val: activeIntl[c] }));
+          const rest = Object.entries(activeIntl).filter(([c]) => !PRIMARY_CODES.includes(c)).map(([code, val]) => ({ code, val }));
+          return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
+            primary.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: primary.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: s.val }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: s.code })
+            ] }, s.code)) }),
+            rest.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-sr-intl-more", children: [
+              /* @__PURE__ */ jsxs("summary", { className: "ps-tryon-sr-intl-more-btn", children: [
+                t("Show more"),
+                " (",
+                rest.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: rest.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-item", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-code", children: s.code }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-val", children: s.val })
+              ] }, s.code)) })
+            ] })
+          ] });
+        })(),
         chartData && chartData.sizes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-sizes", children: [
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-label", children: [
             t("Size Chart"),
@@ -1633,49 +1748,72 @@ function PrimeStyleTryonInner({
             /* @__PURE__ */ jsx("strong", { children: activeSize })
           ] })
         ] }),
-        activeFit && activeFit.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
-              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
-                t("You"),
-                " (",
-                unitLabel,
-                ")"
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-chart", children: [
-                t("Chart"),
-                " (",
-                unitLabel,
-                ")"
+        (() => {
+          const hasDynamic = activeFit && activeFit.length > 0;
+          const hasBackend = sizingResult.matchDetails && sizingResult.matchDetails.length > 0;
+          if (hasDynamic) return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
+                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
+                  t("You"),
+                  " (",
+                  unitLabel,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-chart", children: [
+                  t("Chart"),
+                  " (",
+                  unitLabel,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
-            ] }),
-            activeFit.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${row.fit}`, children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: row.label }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "number",
-                  className: "ps-tryon-sr-fit-input",
-                  defaultValue: isCmResult ? Math.round(row.userVal) : cmToIn(row.userVal),
-                  onBlur: (e) => {
-                    const val = e.target.value;
-                    setEditedValues((prev) => ({ ...prev, [row.formKey]: val }));
+              activeFit.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${row.fit}`, children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: row.label }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    className: "ps-tryon-sr-fit-input",
+                    defaultValue: isCmResult ? Math.round(row.userVal) : cmToIn(row.userVal),
+                    onBlur: (e) => setEditedValues((prev) => ({ ...prev, [row.formKey]: e.target.value }))
                   }
-                }
-              ) }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: fmtRange(row.chartMin, row.chartMax) }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: [
-                row.fit === "good" ? "✓" : row.fit === "tight" ? "↑" : "↓",
-                " ",
-                row.fit === "good" ? t("within range") : row.fit === "tight" ? t("may be snug") : t("may be loose")
-              ] }) })
-            ] }, i))
-          ] })
-        ] }),
-        (!activeFit || activeFit.length === 0) && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) }),
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: fmtRange(row.chartMin, row.chartMax) }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: [
+                  row.fit === "good" ? "✓" : row.fit === "tight" ? "↑" : "↓",
+                  " ",
+                  row.fit === "good" ? t("within range") : row.fit === "tight" ? t("may be snug") : t("may be loose")
+                ] }) })
+              ] }, i))
+            ] })
+          ] });
+          if (hasBackend) return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: t("You") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: t("Chart") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
+              ] }),
+              sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${m.fit}`, children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: m.measurement }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: m.userValue }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: m.chartRange }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${m.fit}`, children: [
+                  m.fit === "good" ? "✓" : m.fit === "tight" ? "↑" : "↓",
+                  " ",
+                  m.fit === "good" ? t("within range") : m.fit === "tight" ? t("may be snug") : t("may be loose")
+                ] }) })
+              ] }, i))
+            ] })
+          ] });
+          if (sizingResult.reasoning) return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) });
+          return null;
+        })(),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-ctas", children: [
           /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
             t("See how it looks on you"),
@@ -2376,6 +2514,25 @@ const STYLES = `
   .ps-tryon-sr-intl { }
   .ps-tryon-sr-label { font-size: 0.78vw; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.52vw; }
   .ps-tryon-sr-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #666; font-style: italic; }
+  .ps-tryon-sr-intl-primary { display: flex; flex-wrap: wrap; gap: 0.42vw; margin-bottom: 0.52vw; }
+  .ps-tryon-sr-intl-card {
+    flex: 1; min-width: 3.5vw; display: flex; flex-direction: column; align-items: center;
+    padding: 0.57vw 0.42vw; border: 1.5px solid #333; border-radius: 0.63vw;
+    background: #1a1b1a; transition: border-color 0.2s;
+  }
+  .ps-tryon-sr-intl-card:hover { border-color: #555; }
+  .ps-tryon-sr-intl-card-val { font-size: 1.04vw; font-weight: 800; color: #fff; line-height: 1.2; }
+  .ps-tryon-sr-intl-card-code { font-size: 0.57vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.1vw; }
+
+  .ps-tryon-sr-intl-more { }
+  .ps-tryon-sr-intl-more-btn {
+    font-size: 0.73vw; color: #bb945c; font-weight: 600; cursor: pointer;
+    list-style: none; margin-bottom: 0.42vw; font-family: inherit;
+  }
+  .ps-tryon-sr-intl-more-btn::-webkit-details-marker { display: none; }
+  .ps-tryon-sr-intl-more-btn::before { content: "▸ "; }
+  .ps-tryon-sr-intl-more[open] .ps-tryon-sr-intl-more-btn::before { content: "▾ "; }
+
   .ps-tryon-sr-intl-grid { display: flex; flex-wrap: wrap; gap: 0.42vw; }
   .ps-tryon-sr-intl-item {
     display: flex; align-items: center; border: 1.5px solid #333; border-radius: 0.52vw; overflow: hidden;

package/package.json

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