@thefittingroom/shop-ui 5.0.4 → 5.0.6

package/dist/index.js

@@ -19034,7 +19034,7 @@ const en$1 = {
   "get-app": { "create_avatar": "Create your avatar" },
   "sign-in": { "email": "Email", "password": "Password", "forgot_password": "Forgot password?", "sign_in": "Sign in", "no_account": "Don’t have an account?", "download_app": "Download the app.", "invalid_email": "Please enter a valid email address.", "missing_password": "Please enter your password.", "login_failed": "Incorrect email or password." },
   "forgot-password": { "title": "Forgot password", "description": "We’ll send you an email with a link to reset your password.", "send_link": "Send link", "link_sent": "Link sent! Please check your email.", "need_help": "Need help?", "contact_us": "Contact us." },
-  "vto-single": { "avatar_loading": "Finding your perfect fit...", "slide_to_rotate": "Slide to rotate", "sign_out": "Sign out", "color_label": "Color:", "add_to_cart": "Add to cart" },
+  "vto-single": { "avatar_loading": "Finding your perfect fit...", "slide_to_rotate": "Slide to rotate", "sign_out": "Sign out", "color_label": "Color:", "add_to_cart": "Add to cart", "view_product_details": "View product details", "hide_product_details": "Hide product details" },
   "size-rec": { "recommended_size": "Recommended Size: {{size}}", "item_fit": "This item is {{fit}}", "select_size": "Select a size to see how it fits", "fitClassification": { "form_fitting": "Form Fitting", "slim_fit": "Slim Fit", "regular_fit": "Regular Fit", "relaxed_fit": "Relaxed Fit", "oversized_fit": "Oversized Fit" }, "measurementLocation": { "neck_base": "Neck", "across_shoulder": "Shoulders", "cb_neck_to_wrist": "Neck to Wrist", "sleeve_length_from_shoulder_point": "Sleeve", "bust": "Bust", "waist": "Waist", "low_waist": "Low Waist", "low_hip": "Low Hip", "high_hip": "High Hip", "thigh": "Thigh", "inseam": "Inseam", "hsp_to_low_hip": "HSP to Low Hip", "hsp_to_crotch": "HSP to Crotch", "low_hip_bottoms": "Low Hip (Bottoms)", "high_hip_bottoms": "High Hip (Bottoms)" }, "fit": { "too_tight": "Too Tight", "tight": "Tight", "slightly_tight": "Slightly Tight", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose", "loose": "Loose", "oversized": "Oversized", "too_short": "Too Short", "short": "Short", "slightly_short": "Slightly Short", "slightly_long": "Slightly Long", "long": "Long", "too_long": "Too Long" } }
 };
 const try_it_on = "Essayez-le";
@@ -19049,7 +19049,7 @@ const fr = {
   "get-app": { "create_avatar": "Créez votre avatar" },
   "sign-in": { "email": "Email", "password": "Mot de passe", "forgot_password": "Mot de passe oublié ?", "sign_in": "Se connecter", "no_account": "Vous n'avez pas de compte ?", "download_app": "Téléchargez l'application.", "invalid_email": "Veuillez entrer une adresse e-mail valide.", "missing_password": "Veuillez entrer votre mot de passe.", "login_failed": "Email ou mot de passe incorrect." },
   "forgot-password": { "title": "Mot de passe oublié", "description": "Nous vous enverrons un e-mail avec un lien pour réinitialiser votre mot de passe.", "send_link": "Envoyer le lien", "link_sent": "Lien envoyé ! Veuillez vérifier votre e-mail.", "need_help": "Besoin d'aide ?", "contact_us": "Contactez-nous." },
-  "vto-single": { "avatar_loading": "Trouver votre ajustement parfait...", "slide_to_rotate": "Faites glisser pour faire pivoter", "sign_out": "Se déconnecter", "color_label": "Couleur :", "add_to_cart": "Ajouter au panier" },
+  "vto-single": { "avatar_loading": "Trouver votre ajustement parfait...", "slide_to_rotate": "Faites glisser pour faire pivoter", "sign_out": "Se déconnecter", "color_label": "Couleur :", "add_to_cart": "Ajouter au panier", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit" },
   "size-rec": { "recommended_size": "Taille recommandée : {{size}}", "item_fit": "Cet article est {{fit}}", "select_size": "Sélectionnez une taille pour voir comment elle s'adapte", "fitClassification": { "form_fitting": "Ajusté", "slim_fit": "Coupe slim", "regular_fit": "Coupe régulière", "relaxed_fit": "Coupe décontractée", "oversized_fit": "Coupe oversize" }, "measurementLocation": { "neck_base": "Cou", "across_shoulder": "Épaules", "cb_neck_to_wrist": "Cou jusqu'au poignet", "sleeve_length_from_shoulder_point": "Manche", "bust": "Buste", "waist": "Taille", "low_waist": "Bas de la taille", "low_hip": "Bas des hanches", "high_hip": "Haut des hanches", "thigh": "Cuisse", "inseam": "Entrejambe", "hsp_to_low_hip": "HSP au bas des hanches", "hsp_to_crotch": "HSP à l'entrejambe", "low_hip_bottoms": "Bas des hanches (bas)", "high_hip_bottoms": "Haut des hanches (bas)" }, "fit": { "too_tight": "Trop serré", "tight": "Serré", "slightly_tight": "Légèrement serré", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample", "loose": "Ample", "oversized": "Oversize", "too_short": "Trop court", "short": "Court", "slightly_short": "Légèrement court", "slightly_long": "Légèrement long", "long": "Long", "too_long": "Trop long" } }
 };
 instance.use(initReactI18next).init({
@@ -19116,6 +19116,9 @@ function _init$6(initThemeData) {
     Object.assign(themeData, initThemeData);
   }
 }
+function getThemeData() {
+  return themeData;
+}
 function useCss(callback) {
   return reactExports.useMemo(() => callback(themeData), []);
 }
@@ -20736,6 +20739,7 @@ const SvgCheckCircle = (props) => /* @__PURE__ */ reactExports.createElement("sv
 const SvgChevronLeft = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M30 36L18 24L30 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
 const SvgChevronRight = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M18 36L30 24L18 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
 const SvgCloseIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 15, height: 16, viewBox: "0 0 15 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249026 1.13202C0.353455 1.02778 0.494976 0.969238 0.642526 0.969238C0.790076 0.969238 0.931598 1.02778 1.03603 1.13202L14.423 14.498C14.4747 14.5498 14.5157 14.6112 14.5436 14.6788C14.5716 14.7463 14.5859 14.8187 14.5859 14.8919C14.5858 14.965 14.5714 15.0374 14.5434 15.1049C14.5153 15.1725 14.4743 15.2338 14.4225 15.2855C14.3708 15.3372 14.3094 15.3782 14.2418 15.4061C14.1742 15.4341 14.1018 15.4484 14.0287 15.4484C13.9555 15.4483 13.8831 15.4339 13.8156 15.4058C13.7481 15.3778 13.6867 15.3368 13.635 15.285L0.250026 1.91802C0.198323 1.86646 0.157301 1.80521 0.129312 1.73777C0.101322 1.67034 0.0869141 1.59804 0.0869141 1.52502C0.0869141 1.45201 0.101322 1.37971 0.129312 1.31227C0.157301 1.24483 0.197323 1.18358 0.249026 1.13202Z", fill: "#21201F" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249003 15.285C0.197149 15.2335 0.156 15.1722 0.127922 15.1046C0.0998429 15.0371 0.0853882 14.9647 0.0853882 14.8916C0.0853882 14.8184 0.0998429 14.746 0.127922 14.6785C0.156 14.6109 0.197149 14.5496 0.249003 14.498L13.635 1.13205C13.7407 1.03479 13.8798 0.982096 14.0234 0.984975C14.167 0.987855 14.3039 1.04608 14.4056 1.1475C14.5073 1.24893 14.5658 1.3857 14.5691 1.52928C14.5723 1.67286 14.52 1.81214 14.423 1.91805L1.036 15.285C0.931574 15.3893 0.790052 15.4478 0.642502 15.4478C0.494952 15.4478 0.353431 15.3893 0.249003 15.285Z", fill: "#21201F" }));
+const SvgDragHandle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 32, height: 4, viewBox: "0 0 32 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 32, height: 4, rx: 2, fill: "black" }));
 const SvgInfoIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.75 9.15V6.75M6.75 4.35H6.756M12.75 6.75C12.75 10.0637 10.0637 12.75 6.75 12.75C3.43629 12.75 0.75 10.0637 0.75 6.75C0.75 3.43629 3.43629 0.75 6.75 0.75C10.0637 0.75 12.75 3.43629 12.75 6.75Z", stroke: "#757575", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
 const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 108, height: 108, viewBox: "0 0 108 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1325 75.9593C25.3424 77.0549 23.0032 76.4919 21.9077 74.7018L20.2636 72.0155L18.786 69.0476L17.5726 65.9622L16.6328 62.7828L15.9737 59.5336L15.6002 56.2393L15.5153 52.925L15.7196 49.6159L16.2115 46.3373L16.9485 43.2752C17.4396 41.2348 19.4918 39.9788 21.5322 40.4699C23.5726 40.961 24.8286 43.0132 24.3375 45.0536L23.6782 47.793L23.2847 50.4154L23.1213 53.0621L23.1893 55.713L23.4879 58.3479L24.0151 60.9467L24.7668 63.4897L25.7373 65.9574L26.9191 68.3312L28.39 70.7345C29.4855 72.5246 28.9225 74.8638 27.1325 75.9593Z", fill: "black" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.542 81.0995C33.5444 79.2557 35.8518 78.5736 37.6955 79.5761L40.171 80.922L42.6022 81.9807L45.1164 82.8236L47.6945 83.4441L50.3169 83.8375L52.9636 84.0009L55.6145 83.933L58.2494 83.6343L60.8482 83.1071L63.3912 82.3554L65.8589 81.385L68.2327 80.2031L70.4945 78.8189L72.627 77.2428L74.6141 75.4868L76.4405 73.5643L78.0924 71.49L79.5573 69.2796L80.8239 66.9499L81.8827 64.5187L82.7255 62.0044L83.346 59.4264L83.7395 56.8039L83.9029 54.1572L83.8349 51.5064L83.5363 48.8715L83.0091 46.2727L82.2574 43.7297L81.2869 41.2619L80.1051 38.8882L78.7208 36.6263L77.1447 34.4938L75.3888 32.5068L73.4662 30.6803L71.392 29.0284L69.1815 27.5636L66.8518 26.297L64.4206 25.2382L61.9064 24.3954L59.3283 23.7749L56.7059 23.3814L54.0592 23.218L51.4083 23.2859L48.7734 23.5846L46.1747 24.1118L43.6316 24.8635L41.1639 25.834L38.7901 27.0158L36.5283 28.4001L34.3958 29.9762L32.4088 31.7321L30.4681 33.7749C29.0225 35.2964 26.6173 35.358 25.0958 33.9125C23.5743 32.467 23.5127 30.0618 24.9582 28.5403L27.1274 26.2569L29.6118 24.0615L32.278 22.0909L35.1058 20.3603L38.0737 18.8826L41.1591 17.6693L44.3385 16.7295L47.5877 16.0704L50.882 15.6969L54.1963 15.612L57.5054 15.8163L60.7841 16.3082L64.0074 17.084L67.1509 18.1378L70.1905 19.4615L73.1032 21.0451L75.8669 22.8766L78.4603 24.942L80.8639 27.2255L83.0594 29.7098L85.0299 32.376L86.7606 35.2039L88.2382 38.1718L89.4516 41.2571L90.3914 44.4365L91.0505 47.6857L91.424 50.98L91.5089 54.2943L91.3046 57.6034L90.8127 60.8821L90.0369 64.1055L88.9831 67.2489L87.6594 70.2886L86.0757 73.2013L84.2443 75.9649L82.1789 78.5584L79.8954 80.962L77.4111 83.1574L74.7448 85.128L71.917 86.8587L68.9491 88.3363L65.8637 89.5496L62.6843 90.4894L59.4351 91.1486L56.1408 91.522L52.8265 91.6069L49.5175 91.4026L46.2388 90.9107L43.0154 90.1349L39.872 89.0811L36.8323 87.7574L34.0653 86.253C32.2216 85.2506 31.5395 82.9432 32.542 81.0995Z", fill: "black", fillOpacity: 0.45 }));
 const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
@@ -20873,6 +20877,7 @@ function ModalTitlebar({
   ] });
 }
 function SidecarModalFrame({
+  contentStyle,
   onRequestClose,
   children
 }) {
@@ -20896,11 +20901,16 @@ function SidecarModalFrame({
       height: "100vh",
       margin: 0,
       padding: 0,
+      overflow: "hidden",
       border: "none",
       backgroundColor: "#FFFFFF"
     }
   }));
-  return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose, contentStyle: isMobileLayout ? css2.frameContentFullScreen : css2.frameContentBase, children });
+  const applyContentStyle = {
+    ...isMobileLayout ? css2.frameContentFullScreen : css2.frameContentBase,
+    ...contentStyle
+  };
+  return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose, contentStyle: applyContentStyle, children });
 }
 var dayjs_min$1 = { exports: {} };
 var dayjs_min = dayjs_min$1.exports;
@@ -41523,8 +41533,21 @@ async function getStyleByExternalId(brandId, externalId) {
   recordCache[cacheKey] = record;
   return record;
 }
+async function getStyleGarmentCategoryById(styleGarmentCategoryId) {
+  const cacheKey = `getStyleGarmentCategoryById/${styleGarmentCategoryId}`;
+  if (recordCache[cacheKey]) {
+    return recordCache[cacheKey];
+  }
+  const firestore = getFirestoreManager();
+  const record = await firestore.getDocData("style_garment_categories", styleGarmentCategoryId.toString());
+  if (!record) {
+    return null;
+  }
+  recordCache[cacheKey] = record;
+  return record;
+}
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
-const AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX = 100;
+const AVATAR_GUTTER_HEIGHT_PX = 100;
 const logger$1 = getLogger("vto-single");
 function VtoSingleOverlay() {
   const {
@@ -41539,6 +41562,7 @@ function VtoSingleOverlay() {
   const [loadedProductData, setLoadedProductData] = reactExports.useState(null);
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
+  const [modalStyle, setModalStyle] = reactExports.useState({});
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
       openOverlay(OverlayName.LANDING, {
@@ -41573,6 +41597,8 @@ function VtoSingleOverlay() {
           logger$1.logError("Style not found for externalId:", currentProduct.externalId);
           return;
         }
+        const styleGarmentCategoryRec = await getStyleGarmentCategoryById(styleRec.style_garment_category_id);
+        const styleCategoryLabel = styleGarmentCategoryRec?.style_category_label ?? null;
         const sizeRecommendationRecord = await getSizeRecommendation(styleRec.id);
         let productData;
         const recommendedSizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size) ?? "(unknown)";
@@ -41619,7 +41645,8 @@ function VtoSingleOverlay() {
             fitClassification,
             recommendedSizeId,
             recommendedSizeLabel,
-            sizes
+            sizes,
+            styleCategoryLabel
           };
         }
         let recommendedColorLabel;
@@ -41729,21 +41756,26 @@ function VtoSingleOverlay() {
   } else {
     Layout = DesktopLayout;
   }
-  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
+  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
 }
 function MobileLayout({
-  // loadedProductData,
-  // selectedColorSizeRecord,
-  // availableColorLabels,
-  // selectedColorLabel,
-  // selectedSizeLabel,
+  loadedProductData,
+  selectedColorSizeRecord,
+  availableColorLabels,
+  selectedColorLabel,
+  selectedSizeLabel,
   frameUrls,
-  onClose
-  // onChangeColor,
-  // onChangeSize,
-  // onAddToCart,
-  // onSignOut,
+  setModalStyle,
+  onClose,
+  onChangeColor,
+  onChangeSize,
+  onAddToCart,
+  onSignOut
 }) {
+  const [contentView, setContentView] = reactExports.useState("collapsed");
+  const bottomFrameInnerRef = reactExports.useRef(null);
+  const [bottomFrameOuterStyle, setBottomFrameOuterStyle] = reactExports.useState({});
+  const [bottomFrameInnerStyle, setBottomFrameInnerStyle] = reactExports.useState({});
   const css2 = useCss((_theme) => ({
     mainContainer: {
       width: "100%",
@@ -41751,7 +41783,7 @@ function MobileLayout({
     },
     closeButton: {
       position: "absolute",
-      top: "10px",
+      top: "12px",
       right: "10px",
       width: "30px",
       height: "30px",
@@ -41765,11 +41797,307 @@ function MobileLayout({
     closeIcon: {
       width: "16px",
       height: "16px"
+    },
+    bottomFrameOuter: {
+      position: "absolute",
+      width: "calc(100% - 16px)",
+      maxWidth: "450px",
+      bottom: "0",
+      maxHeight: "95vh",
+      left: "50%",
+      transform: "translateX(-50%)",
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
+      borderTopLeftRadius: "28px",
+      borderTopRightRadius: "28px",
+      borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+      borderLeft: "1px solid rgba(0, 0, 0, 0.1)",
+      borderRight: "1px solid rgba(0, 0, 0, 0.1)",
+      margin: "0",
+      padding: "0",
+      transition: "height 0.5s"
+    },
+    bottomFrameInner: {
+      width: "100%",
+      padding: "16px 8px 0 8px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    headerContainer: {
+      width: "100%",
+      flex: "none",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    dragHandleIcon: {
+      width: "32px",
+      height: "4px"
+    },
+    recommendedSizeContainer: {
+      marginTop: "10px",
+      marginBottom: "14px"
+    },
+    recommendedSizeText: {
+      textTransform: "uppercase",
+      fontWeight: "600"
+    },
+    contentContainer: {
+      flexGrow: 1,
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "0 16px 16px 16px",
+      backgroundColor: "#FFFFFF",
+      overflowY: "auto"
+    },
+    sizeSelectorContainer: {},
+    colorSelectorContainer: {
+      marginTop: "16px"
+    },
+    itemFitTextContainer: {
+      marginTop: "8px"
+    },
+    itemFitText: {},
+    itemFitDetailsContainer: {
+      marginTop: "8px",
+      width: "70%"
+    },
+    buttonContainer: {
+      marginTop: "16px",
+      width: "100%"
+    },
+    productNameContainer: {
+      marginTop: "16px"
+    },
+    productNameText: {},
+    priceContainer: {},
+    priceText: {},
+    productDescriptionContainer: {
+      marginTop: "8px"
+    },
+    footerContainer: {
+      marginTop: "24px"
     }
   }));
+  reactExports.useEffect(() => {
+    function refreshBottomFrameStyle() {
+      const bottomFrameInnerEl = bottomFrameInnerRef.current;
+      if (!bottomFrameInnerEl) {
+        return;
+      }
+      const maxHeightPx = Number(window.getComputedStyle(bottomFrameInnerEl.parentElement).getPropertyValue("max-height").replace("px", ""));
+      const heightPx = Math.min(bottomFrameInnerEl.clientHeight, maxHeightPx);
+      const bottomFrameStyle = {
+        height: `${heightPx}px`
+      };
+      setBottomFrameOuterStyle(bottomFrameStyle);
+      setBottomFrameInnerStyle(bottomFrameStyle);
+    }
+    setBottomFrameInnerStyle({});
+    setTimeout(refreshBottomFrameStyle, 50);
+  }, [contentView]);
+  const handleBottomFrameTouchStart = reactExports.useCallback((e) => {
+    let startY = e.touches[0].clientY;
+    const initialContentView = contentView;
+    const onTouchMove = (moveEvent) => {
+      const deltaY = moveEvent.touches[0].clientY - startY;
+      if (Math.abs(deltaY) >= 30) {
+        if (deltaY > 0) {
+          if (initialContentView === "full" || initialContentView === "expanded") {
+            setContentView("collapsed");
+          }
+        } else {
+          if (initialContentView === "collapsed") {
+            setContentView("expanded");
+          } else if (initialContentView === "expanded") {
+            setContentView("full");
+          }
+        }
+        document.removeEventListener("touchmove", onTouchMove);
+      }
+    };
+    document.addEventListener("touchmove", onTouchMove);
+    const onTouchEnd = () => {
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+    };
+    document.addEventListener("touchend", onTouchEnd);
+  }, [contentView]);
+  let aboveContentNode = null;
+  if (contentView === "expanded" || contentView === "full") {
+    aboveContentNode = /* @__PURE__ */ jsx$1(ProductSummaryRow, { loadedProductData });
+  }
+  let Content;
+  switch (contentView) {
+    case "collapsed":
+      Content = MobileContentCollapsed;
+      break;
+    case "expanded":
+      Content = MobileContentExpanded;
+      break;
+    case "full":
+      Content = MobileContentFull;
+      break;
+  }
   return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
-    /* @__PURE__ */ jsx$1(Avatar, { frameUrls }),
-    /* @__PURE__ */ jsx$1("button", { onClick: onClose, "aria-label": "Close modal", css: css2.closeButton, children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.closeIcon }) })
+    /* @__PURE__ */ jsx$1(Avatar, { frameUrls, setModalStyle }),
+    /* @__PURE__ */ jsx$1("button", { onClick: onClose, "aria-label": "Close modal", css: css2.closeButton, children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.closeIcon }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.bottomFrameOuter, style: bottomFrameOuterStyle, children: /* @__PURE__ */ jsxs("div", { ref: bottomFrameInnerRef, css: css2.bottomFrameInner, style: bottomFrameInnerStyle, children: [
+      /* @__PURE__ */ jsxs("div", { css: css2.headerContainer, onTouchStart: handleBottomFrameTouchStart, children: [
+        /* @__PURE__ */ jsx$1(SvgDragHandle, { css: css2.dragHandleIcon }),
+        /* @__PURE__ */ jsx$1("div", { css: css2.recommendedSizeContainer, children: /* @__PURE__ */ jsx$1(RecommendedSizeText, { loadedProductData, textCss: css2.recommendedSizeText }) })
+      ] }),
+      aboveContentNode,
+      /* @__PURE__ */ jsx$1("div", { css: css2.contentContainer, children: /* @__PURE__ */ jsx$1(Content, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, onChangeContentView: setContentView, onChangeColor, onChangeSize, onAddToCart, onSignOut }) })
+    ] }) })
+  ] });
+}
+function MobileContentCollapsed({
+  loadedProductData,
+  selectedSizeLabel,
+  onChangeSize
+}) {
+  const css2 = useCss((_theme) => ({
+    selectSizeLabelContainer: {
+      marginTop: "8px"
+    },
+    selectSizeLabelText: {},
+    sizeSelectorContainer: {
+      marginTop: "8px"
+    }
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) })
+  ] });
+}
+function MobileContentExpanded({
+  loadedProductData,
+  selectedSizeLabel,
+  onChangeContentView,
+  onChangeSize,
+  onAddToCart
+}) {
+  const css2 = useCss((_theme) => ({
+    selectSizeLabelContainer: {
+      marginTop: "8px"
+    },
+    selectSizeLabelText: {},
+    sizeSelectorContainer: {
+      marginTop: "8px"
+    },
+    itemFitTextContainer: {
+      marginTop: "8px"
+    },
+    itemFitText: {},
+    itemFitDetailsContainer: {
+      marginTop: "8px",
+      width: "70%"
+    },
+    buttonContainer: {
+      marginTop: "24px",
+      width: "100%"
+    },
+    productDetailsContainer: {
+      marginTop: "24px",
+      marginBottom: "16px"
+    },
+    productDetailsText: {
+      textDecoration: "underline",
+      textTransform: "uppercase",
+      cursor: "pointer"
+    }
+  }));
+  const handleProductDetailsClick = reactExports.useCallback(() => {
+    onChangeContentView("full");
+  }, [onChangeContentView]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.itemFitTextContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.productDetailsContainer, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.productDetailsText, t: "vto-single.view_product_details", onClick: handleProductDetailsClick }) })
+  ] });
+}
+function MobileContentFull({
+  loadedProductData,
+  selectedColorSizeRecord,
+  availableColorLabels,
+  selectedColorLabel,
+  selectedSizeLabel,
+  onChangeContentView,
+  onChangeColor,
+  onChangeSize,
+  onAddToCart,
+  onSignOut
+}) {
+  const css2 = useCss((_theme) => ({
+    sizeRecommendationFrame: {
+      marginTop: "16px",
+      display: "flex",
+      flexDirection: "column",
+      border: "1px solid rgba(33, 32, 31, 0.2)",
+      padding: "16px 56px",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    selectSizeLabelContainer: {},
+    selectSizeLabelText: {},
+    sizeSelectorContainer: {
+      marginTop: "16px"
+    },
+    colorSelectorContainer: {
+      marginTop: "16px"
+    },
+    itemFitTextContainer: {
+      marginTop: "8px"
+    },
+    itemFitText: {},
+    itemFitDetailsContainer: {
+      marginTop: "8px",
+      width: "100%"
+    },
+    buttonContainer: {
+      marginTop: "16px",
+      width: "100%"
+    },
+    productDetailsContainer: {
+      marginTop: "24px",
+      marginBottom: "16px"
+    },
+    productDetailsText: {
+      textDecoration: "underline",
+      textTransform: "uppercase",
+      cursor: "pointer"
+    },
+    priceContainer: {},
+    priceText: {},
+    productDescriptionContainer: {
+      marginTop: "8px"
+    },
+    footerContainer: {
+      marginTop: "48px"
+    }
+  }));
+  const handleProductDetailsClick = reactExports.useCallback(() => {
+    onChangeContentView("expanded");
+  }, [onChangeContentView]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationFrame, children: [
+      /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.itemFitTextContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
+    ] }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.productDetailsContainer, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.productDetailsText, t: "vto-single.hide_product_details", onClick: handleProductDetailsClick }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.priceContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.priceText, children: selectedColorSizeRecord.priceFormatted }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.productDescriptionContainer, children: /* @__PURE__ */ jsx$1(ProductDescriptionText, { loadedProductData }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.footerContainer, children: /* @__PURE__ */ jsx$1(Footer, { onSignOutClick: onSignOut }) })
   ] });
 }
 function DesktopLayout({
@@ -41779,6 +42107,7 @@ function DesktopLayout({
   selectedColorLabel,
   selectedSizeLabel,
   frameUrls,
+  setModalStyle,
   onClose,
   onChangeColor,
   onChangeSize,
@@ -41791,7 +42120,9 @@ function DesktopLayout({
   const css2 = useCss((_theme) => ({
     mainContainer: {
       display: "flex",
-      height: "100%"
+      height: "100%",
+      position: "relative",
+      top: "-1px"
     },
     rightContainer: {
       flexGrow: 1,
@@ -41820,7 +42151,7 @@ function DesktopLayout({
     colorContainer: {
       marginTop: "16px"
     },
-    sizeRecommendationContainer: {
+    sizeRecommendationFrame: {
       marginTop: "16px",
       display: "flex",
       flexDirection: "column",
@@ -41862,19 +42193,19 @@ function DesktopLayout({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
-    /* @__PURE__ */ jsx$1(Avatar, { frameUrls }),
+    /* @__PURE__ */ jsx$1(Avatar, { frameUrls, setModalStyle }),
     /* @__PURE__ */ jsxs("div", { css: css2.rightContainer, children: [
       /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("try_it_on"), onCloseClick: onClose }),
       /* @__PURE__ */ jsxs("div", { css: css2.contentContainer, children: [
         /* @__PURE__ */ jsx$1("div", { css: css2.productNameContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productNameText, children: loadedProductData.productName }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.priceContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.priceText, children: selectedColorSizeRecord.priceFormatted }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
-        /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationContainer, children: [
+        /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationFrame, children: [
           /* @__PURE__ */ jsxs("div", { css: css2.recommendedSizeContainer, children: [
             /* @__PURE__ */ jsx$1(SvgInfoIcon, {}),
-            /* @__PURE__ */ jsx$1(RecommendedSizeText, { loadedProductData, css: css2.recommendedSizeText })
+            /* @__PURE__ */ jsx$1(RecommendedSizeText, { loadedProductData, textCss: css2.recommendedSizeText })
           ] }),
-          /* @__PURE__ */ jsx$1("div", { css: css2.itemFitContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData, css: css2.itemFitText }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.itemFitContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData, textCss: css2.itemFitText }) }),
           /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
           /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
           /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
@@ -41887,15 +42218,17 @@ function DesktopLayout({
   ] });
 }
 function Avatar({
-  frameUrls
+  frameUrls,
+  setModalStyle
 }) {
   const deviceLayout = useMainStore((state) => state.deviceLayout);
   const isMobileLayout = deviceLayout === DeviceLayout.MOBILE_PORTRAIT || deviceLayout === DeviceLayout.TABLET_PORTRAIT;
-  const [containerSize, setContainerSize] = reactExports.useState({
-    width: window.innerWidth,
-    height: window.innerHeight
+  const [layoutData, setLayoutData] = reactExports.useState({
+    topContainerStyle: {},
+    imageContainerStyle: {},
+    imageStyle: {},
+    bottomContainerStyle: {}
   });
-  const topContainerRef = reactExports.useRef(null);
   const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
   const css2 = useCss((theme) => ({
     topContainer: {
@@ -41929,7 +42262,7 @@ function Avatar({
     },
     bottomContainer: {
       position: "absolute",
-      bottom: "0",
+      bottom: "1px",
       height: "50px",
       display: "flex",
       flexDirection: "column",
@@ -41950,23 +42283,90 @@ function Avatar({
     }
   }));
   reactExports.useEffect(() => {
-    const handleResize = () => {
-      const containerEl = topContainerRef.current;
-      const size = containerEl ? {
-        width: containerEl.clientWidth,
-        height: containerEl.clientHeight
-      } : {
-        width: window.innerWidth,
-        height: window.innerHeight
+    function refreshLayoutData() {
+      let imageSize;
+      let bottomContainerStyle;
+      let modalStyle;
+      if (isMobileLayout) {
+        const screenWidthPx = window.innerWidth;
+        const screenHeightPx = window.innerHeight;
+        let imageWidthPx = screenWidthPx;
+        let imageHeightPx = Math.floor(imageWidthPx / AVATAR_IMAGE_ASPECT_RATIO);
+        let bottomContainerHeightPx = screenHeightPx - imageHeightPx;
+        let modalWidthPx = null;
+        if (bottomContainerHeightPx < AVATAR_GUTTER_HEIGHT_PX) {
+          bottomContainerHeightPx = AVATAR_GUTTER_HEIGHT_PX;
+          imageHeightPx = screenHeightPx - bottomContainerHeightPx;
+          imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
+          modalWidthPx = imageWidthPx;
+        }
+        imageSize = {
+          width: imageWidthPx,
+          height: imageHeightPx
+        };
+        bottomContainerStyle = {
+          width: imageWidthPx,
+          height: bottomContainerHeightPx
+        };
+        if (modalWidthPx != null) {
+          const theme = getThemeData();
+          modalStyle = {
+            width: modalWidthPx + "px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            borderTopColor: theme.color_tfr_800,
+            borderTopStyle: "solid",
+            borderTopWidth: "1px",
+            borderRightColor: theme.color_tfr_800,
+            borderRightStyle: "solid",
+            borderRightWidth: "1px",
+            borderLeftColor: theme.color_tfr_800,
+            borderLeftStyle: "solid",
+            borderLeftWidth: "1px"
+          };
+        } else {
+          modalStyle = {};
+        }
+      } else {
+        const screenHeightPx = window.innerHeight;
+        const bottomContainerHeightPx = AVATAR_GUTTER_HEIGHT_PX;
+        const imageHeightPx = screenHeightPx - bottomContainerHeightPx;
+        const imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
+        imageSize = {
+          width: imageWidthPx,
+          height: imageHeightPx
+        };
+        bottomContainerStyle = {
+          width: imageWidthPx,
+          height: bottomContainerHeightPx
+        };
+        modalStyle = {};
+      }
+      const topContainerStyle = {
+        width: imageSize.width + "px"
       };
-      setContainerSize(size);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
+      const imageContainerStyle = {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px"
+      };
+      const imageStyle = {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px"
+      };
+      setLayoutData({
+        topContainerStyle,
+        imageContainerStyle,
+        imageStyle,
+        bottomContainerStyle
+      });
+      setModalStyle(modalStyle);
+    }
+    refreshLayoutData();
+    window.addEventListener("resize", refreshLayoutData);
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("resize", refreshLayoutData);
     };
-  }, []);
+  }, [isMobileLayout]);
   reactExports.useEffect(() => {
     if (frameUrls && frameUrls.length > 0 && selectedFrameIndex == null) {
       let currentFrameIndex = 0;
@@ -41980,42 +42380,6 @@ function Avatar({
       }, 200);
     }
   }, [frameUrls, selectedFrameIndex]);
-  const {
-    imageSize,
-    bottomContainerSize
-  } = reactExports.useMemo(() => {
-    let imageSize2;
-    let bottomContainerSize2;
-    if (isMobileLayout) {
-      const imageWidthPx = containerSize.width;
-      const imageHeightPx = Math.floor(imageWidthPx / AVATAR_IMAGE_ASPECT_RATIO);
-      const bottomContainerHeightPx = containerSize.height - imageHeightPx;
-      imageSize2 = {
-        width: imageWidthPx,
-        height: imageHeightPx
-      };
-      bottomContainerSize2 = {
-        width: imageWidthPx,
-        height: bottomContainerHeightPx
-      };
-    } else {
-      const imageHeightPx = containerSize.height - AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX;
-      const imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
-      const bottomContainerHeightPx = AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX;
-      imageSize2 = {
-        width: imageWidthPx,
-        height: imageHeightPx
-      };
-      bottomContainerSize2 = {
-        width: imageWidthPx,
-        height: bottomContainerHeightPx
-      };
-    }
-    return {
-      imageSize: imageSize2,
-      bottomContainerSize: bottomContainerSize2
-    };
-  }, [isMobileLayout, containerSize]);
   const rotateLeft = reactExports.useCallback(() => {
     setSelectedFrameIndex((prevIndex) => {
       if (prevIndex == null) {
@@ -42032,7 +42396,7 @@ function Avatar({
       return prevIndex === (frameUrls ? frameUrls.length - 1 : 0) ? 0 : prevIndex + 1;
     });
   }, [frameUrls]);
-  const handleImageDrag = reactExports.useCallback((e) => {
+  const handleImageMouseDrag = reactExports.useCallback((e) => {
     e.preventDefault();
     let startX = e.clientX;
     const onMouseMove = (moveEvent) => {
@@ -42053,24 +42417,36 @@ function Avatar({
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
   }, [rotateLeft, rotateRight]);
+  const handleImageTouchDrag = reactExports.useCallback((e) => {
+    e.preventDefault();
+    let startX = e.touches[0].clientX;
+    const onTouchMove = (moveEvent) => {
+      const deltaX = moveEvent.touches[0].clientX - startX;
+      if (Math.abs(deltaX) >= 50) {
+        if (deltaX > 0) {
+          rotateRight();
+        } else {
+          rotateLeft();
+        }
+        startX = moveEvent.touches[0].clientX;
+      }
+    };
+    const onTouchEnd = () => {
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+    window.addEventListener("touchmove", onTouchMove);
+    window.addEventListener("touchend", onTouchEnd);
+  }, [rotateLeft, rotateRight]);
   let contentNode;
   if (frameUrls && selectedFrameIndex != null) {
     contentNode = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px"
-      }, children: [
-        /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: {
-          width: imageSize.width + "px",
-          height: imageSize.height + "px"
-        }, onMouseDown: handleImageDrag }),
+      /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: layoutData.imageContainerStyle, children: [
+        /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: layoutData.imageStyle, onMouseDown: handleImageMouseDrag, onTouchStart: handleImageTouchDrag }),
         /* @__PURE__ */ jsx$1("div", { css: css2.chevronLeftContainer, onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.chevronRightContainer, onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
       ] }),
-      /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: {
-        width: bottomContainerSize.width + "px",
-        height: bottomContainerSize.height + "px"
-      }, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx$1("input", { type: "range", min: 0, max: frameUrls.length - 1, step: 1, value: selectedFrameIndex, onChange: (e) => setSelectedFrameIndex(Number(e.target.value)), css: css2.sliderInput }),
         /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.slide_to_rotate", css: css2.sliderText })
       ] }) })
@@ -42078,9 +42454,33 @@ function Avatar({
   } else {
     contentNode = /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" });
   }
-  return /* @__PURE__ */ jsx$1("div", { ref: topContainerRef, css: css2.topContainer, style: {
-    width: imageSize.width + "px"
-  }, children: contentNode });
+  return /* @__PURE__ */ jsx$1("div", { css: css2.topContainer, style: layoutData.topContainerStyle, children: contentNode });
+}
+function ProductSummaryRow({
+  loadedProductData
+}) {
+  const css2 = useCss((_theme) => ({
+    container: {
+      width: "100%",
+      padding: "4px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      backgroundColor: "#F8F8F8"
+    },
+    labelContainer: {},
+    labelText: {
+      color: "#1A1A1A"
+    },
+    nameContainer: {},
+    nameText: {
+      color: "#9F9F9F"
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
+    /* @__PURE__ */ jsx$1("div", { css: css2.labelContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.labelText, children: loadedProductData.styleCategoryLabel }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.nameContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.nameText, children: loadedProductData.productName }) })
+  ] });
 }
 function ColorSelector({
   availableColorLabels,
@@ -42149,20 +42549,20 @@ function SizeSelector({
 }
 function RecommendedSizeText({
   loadedProductData,
-  css: css2
+  textCss
 }) {
-  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2, t: "size-rec.recommended_size", vars: {
+  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: textCss, t: "size-rec.recommended_size", vars: {
     size: loadedProductData.recommendedSizeLabel
   } });
 }
 function ItemFitText({
   loadedProductData,
-  css: css2
+  textCss
 }) {
   const {
     t
   } = useTranslation();
-  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2, t: "size-rec.item_fit", vars: {
+  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: textCss, t: "size-rec.item_fit", vars: {
     fit: t(`size-rec.fitClassification.${loadedProductData.fitClassification}`) || loadedProductData.fitClassification
   } });
 }
@@ -42559,9 +42959,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.4"}`,
-    commitHash: `${"ab04059"}`,
-    date: `${"2026-01-07T14:09:55.391Z"}`
+    version: `${"5.0.6"}`,
+    commitHash: `${"e594d20"}`,
+    date: `${"2026-01-12T14:54:57.160Z"}`
   }
 };
 const CONFIGS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",