@thefittingroom/shop-ui 5.0.23 → 5.0.25

package/dist/index.js

@@ -14101,16 +14101,8 @@ function _init$7() {
     fittingRoom: items
   });
 }
-async function toggleFittingRoomItem(productId, handle, isPdp) {
+async function addFittingRoomItem(productId, handle, isPdp) {
   const state = useMainStore.getState();
-  const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
-  if (isInFittingRoom) {
-    logger$g.logDebug("{{ts}} - Removing from fitting room", {
-      productId
-    });
-    state.removeFromFittingRoom(productId);
-    return;
-  }
   logger$g.logDebug("{{ts}} - Adding to fitting room", {
     productId,
     handle,
@@ -14161,6 +14153,25 @@ async function toggleFittingRoomItem(productId, handle, isPdp) {
     addedAt: Date.now()
   });
 }
+async function toggleFittingRoomItem(productId, handle, isPdp) {
+  const state = useMainStore.getState();
+  const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
+  if (isInFittingRoom) {
+    logger$g.logDebug("{{ts}} - Removing from fitting room", {
+      productId
+    });
+    state.removeFromFittingRoom(productId);
+    return;
+  }
+  await addFittingRoomItem(productId, handle, isPdp);
+}
+async function ensureFittingRoomItem(productId, handle, isPdp) {
+  const state = useMainStore.getState();
+  if (state.fittingRoom.some((item) => item.externalId === productId)) {
+    return;
+  }
+  await addFittingRoomItem(productId, handle, isPdp);
+}
 const BROWSER_ALIASES_MAP = {
   AmazonBot: "amazonbot",
   "Amazon Silk": "amazon_silk",
@@ -19307,7 +19318,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", "view_product_details": "View product details", "hide_product_details": "Hide product details", "no_recommendation": "There are currently no well fitting sizes available for this item." },
+  "quick-view": { "title": "Quick View Try On", "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", "no_recommendation": "There are currently no well fitting sizes available for this item.", "vto_error": "Couldn't load the try-on. Please try again.", "zoom_in": "Zoom In" },
   "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", "high_hip": "High Hip", "low_hip": "Low 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" } },
   "fit-chart": { "fit_scale": "Fit Scale", "fit": { "poor_fit": "Poor Fit", "acceptable_fit": "Acceptable Fit", "too_tight": "Too Tight", "tight": "Tight or More Fitted", "slightly_tight": "Slightly Tight or Fitted", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose or Less Fitted", "loose": "Loose or Not Fitted", "oversized": "Oversized" }, "measurement_points": "Measurement Points", "point": { "bust": "Chest/Bust", "waist": "Natural Waist", "pant_waist": "Pant Waist", "high_hip": "High Hip", "low_hip": "Low Hip", "thigh": "Thigh" } }
 };
@@ -19331,11 +19342,11 @@ 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", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit", "no_recommendation": "Il n'y a actuellement pas de tailles bien ajustées disponibles pour cet article." },
+  "quick-view": { "title": "Essayage rapide", "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", "no_recommendation": "Il n'y a actuellement pas de tailles bien ajustées disponibles pour cet article.", "vto_error": "Impossible de charger l'essayage. Veuillez réessayer.", "zoom_in": "Agrandir" },
   "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", "high_hip": "Haut des hanches", "low_hip": "Bas 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" } },
   "fit-chart": { "fit_scale": "Échelle d'ajustement", "fit": { "poor_fit": "Mauvais ajustement", "acceptable_fit": "Ajustement acceptable", "too_tight": "Trop serré", "tight": "Serré ou plus ajusté", "slightly_tight": "Légèrement serré ou ajusté", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample ou moins ajusté", "loose": "Ample ou non ajusté", "oversized": "Oversize" }, "measurement_points": "Points de mesure", "point": { "bust": "Poitrine/Buste", "waist": "Taille naturelle", "pant_waist": "Taille du pantalon", "high_hip": "Haut des hanches", "low_hip": "Bas des hanches", "thigh": "Cuisse" } }
 };
-instance.use(initReactI18next).init({
+void instance.use(initReactI18next).init({
   lng: "en",
   fallbackLng: "en",
   resources: {
@@ -19385,14 +19396,14 @@ function keyframes() {
   };
 }
 const themeData = {
-  brand_font_family: "TN web use only, Times New Roman, serif",
+  brand_font_family: "'Inter', sans-serif",
   brand_link_text_decoration: "underline",
   brand_button_background_color: "#FFA273",
   brand_button_text_color: "#21201F",
   color_danger: "#900B09",
   color_fg_text: "#21201F",
   color_tfr_800: "#265A64",
-  font_family: "sans-serif"
+  font_family: "'Inter', sans-serif"
 };
 function _init$6(initThemeData) {
   if (initThemeData) {
@@ -19487,7 +19498,7 @@ const Text = reactExports.forwardRef(({
   const variantCss = useVariantCss(variant, (theme) => ({
     base: {
       color: theme.color_fg_text,
-      fontFamily: "sans-serif",
+      fontFamily: theme.font_family,
       fontSize: "14px"
     },
     brand: {
@@ -19497,6 +19508,7 @@ const Text = reactExports.forwardRef(({
     },
     error: {
       color: theme.color_danger,
+      fontFamily: theme.font_family,
       fontSize: "14px"
     }
   }));
@@ -21244,6 +21256,45 @@ function SidecarModalFrame({
   };
   return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose, contentStyle: applyContentStyle, children });
 }
+function Snackbar({
+  messageKey,
+  onDismiss
+}) {
+  const css2 = useCss((theme) => ({
+    container: {
+      position: "absolute",
+      left: "50%",
+      bottom: "24px",
+      transform: "translateX(-50%)",
+      padding: "12px 20px",
+      borderRadius: "24px",
+      backgroundColor: theme.color_fg_text,
+      fontSize: "13px",
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      zIndex: 10,
+      maxWidth: "calc(100% - 32px)"
+    },
+    // The Text 'base' variant carries a dark color; override it so the copy
+    // is readable on the dark snackbar background.
+    text: {
+      color: "#FFFFFF"
+    },
+    dismiss: {
+      background: "none",
+      border: "none",
+      color: "#FFFFFF",
+      fontSize: "16px",
+      lineHeight: 1,
+      cursor: "pointer"
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: messageKey, css: css2.text }),
+    /* @__PURE__ */ jsx$1("button", { css: css2.dismiss, onClick: onDismiss, "aria-label": "Dismiss", children: "×" })
+  ] });
+}
 var dayjs_min$1 = { exports: {} };
 var dayjs_min = dayjs_min$1.exports;
 var hasRequiredDayjs_min;
@@ -41000,11 +41051,148 @@ registerAuth(
   "Browser"
   /* ClientPlatform.BROWSER */
 );
+const logger$e = getLogger("firebase-mock");
+class MockFirestoreManager {
+  constructor(seedDocs = {}) {
+    const cloned = {};
+    for (const [coll, byId] of Object.entries(seedDocs)) {
+      cloned[coll] = {
+        ...byId
+      };
+    }
+    this.docs = cloned;
+  }
+  async getDocData(collectionName, docId) {
+    const doc2 = this.docs[collectionName]?.[docId];
+    return doc2 ?? null;
+  }
+  async setDocData(collectionName, docId, data) {
+    if (!this.docs[collectionName]) {
+      this.docs[collectionName] = {};
+    }
+    this.docs[collectionName][docId] = data;
+  }
+  async mergeDocData(collectionName, docId, data) {
+    if (!this.docs[collectionName]) {
+      this.docs[collectionName] = {};
+    }
+    const existing = this.docs[collectionName][docId] ?? {};
+    this.docs[collectionName][docId] = {
+      ...existing,
+      ...data
+    };
+  }
+  listenToDoc(collectionName, docId, callback) {
+    const doc2 = this.docs[collectionName]?.[docId];
+    callback(doc2 ?? null);
+    return () => {
+    };
+  }
+  async queryDocs(collectionName, _constraints) {
+    const entries = Object.values(this.docs[collectionName] ?? {});
+    const docs = entries.map((data) => ({
+      data: () => data
+    }));
+    const snapshot = {
+      empty: docs.length === 0,
+      docs,
+      forEach: (cb) => docs.forEach(cb)
+    };
+    return snapshot;
+  }
+}
+function makeMockAuthUser(seed) {
+  const fake = {
+    uid: seed.uid,
+    email: seed.email,
+    getIdToken: async (_forceRefresh) => seed.idToken
+  };
+  return fake;
+}
+class MockAuthManager {
+  constructor(seed, firestore) {
+    this.userProfile = null;
+    this.authStateChangeListeners = /* @__PURE__ */ new Set();
+    this.userProfileChangeListeners = /* @__PURE__ */ new Set();
+    this.profileUnsub = null;
+    this.seed = seed;
+    this.currentUser = seed ? makeMockAuthUser(seed) : null;
+    this.firestore = firestore;
+    this.addAuthStateChangeListener((authUser) => this.handleAuthStateChanged(authUser));
+  }
+  addAuthStateChangeListener(callback) {
+    this.authStateChangeListeners.add(callback);
+    callback(this.currentUser);
+    return () => {
+      this.authStateChangeListeners.delete(callback);
+    };
+  }
+  removeAuthStateChangeListener(callback) {
+    this.authStateChangeListeners.delete(callback);
+  }
+  addUserProfileChangeListener(callback) {
+    this.userProfileChangeListeners.add(callback);
+    callback(this.userProfile);
+    return () => {
+      this.userProfileChangeListeners.delete(callback);
+    };
+  }
+  removeUserProfileChangeListener(callback) {
+    this.userProfileChangeListeners.delete(callback);
+  }
+  getAuthUser() {
+    return this.currentUser;
+  }
+  async getAuthToken(_forceRefresh = false) {
+    if (!this.currentUser || !this.seed) {
+      throw new Error("No authenticated user");
+    }
+    return this.seed.idToken;
+  }
+  async getUserProfile(_forceRefresh = false) {
+    return this.userProfile;
+  }
+  async login(_email, _password) {
+    throw new Error("MockAuthManager.login is not supported — seed the user via InitParams.testHooks.auth");
+  }
+  async logout() {
+    if (this.profileUnsub) {
+      this.profileUnsub();
+      this.profileUnsub = null;
+    }
+    this.currentUser = null;
+    this.userProfile = null;
+    this.authStateChangeListeners.forEach((cb) => cb(null));
+    this.userProfileChangeListeners.forEach((cb) => cb(null));
+  }
+  async sendPasswordResetEmail(_email) {
+  }
+  async confirmPasswordReset(_code, _newPassword) {
+  }
+  handleAuthStateChanged(authUser) {
+    if (this.profileUnsub) {
+      this.profileUnsub();
+      this.profileUnsub = null;
+    }
+    if (authUser) {
+      logger$e.logDebug("Mock user logged in:", {
+        uid: authUser.uid
+      });
+      this.profileUnsub = this.firestore.listenToDoc("users", authUser.uid, (profile) => {
+        this.userProfile = profile;
+        this.userProfileChangeListeners.forEach((cb) => cb(this.userProfile));
+      });
+    } else {
+      this.userProfile = null;
+      this.userProfileChangeListeners.forEach((cb) => cb(null));
+    }
+  }
+}
 const firebaseDateToDayjs = (date) => {
   return dayjs(date.seconds * 1e3);
 };
 const LOGIN_TRACKING_PERIOD_SECONDS = 1800;
-const logger$e = getLogger("firebase");
+const logger$d = getLogger("firebase");
 let firebaseApp = null;
 class FirestoreManager {
   constructor(firestore) {
@@ -41132,14 +41320,14 @@ class AuthManager {
       this.listenToUserProfileUnsub = null;
     }
     if (authUser) {
-      logger$e.logDebug("User logged in:", {
+      logger$d.logDebug("User logged in:", {
         uid: authUser.uid
       });
       this.listenToUserProfileUnsub = getFirestoreManager().listenToDoc("users", authUser.uid, (doc2) => {
         this.userProfile = doc2;
         this.userProfileChangeListeners.forEach((callback) => callback(this.userProfile));
       });
-      (async () => {
+      void (async () => {
         try {
           const firestore = getFirestoreManager();
           const userLoggingDocId = authUser.uid;
@@ -41166,7 +41354,7 @@ class AuthManager {
             await firestore.mergeDocData("user_logging", userLoggingDocId, userLoggingData);
           }
         } catch (error) {
-          logger$e.logError("Error logging user login activity:", {
+          logger$d.logError("Error logging user login activity:", {
             error
           });
         }
@@ -41187,8 +41375,24 @@ function getAuthManager() {
 async function _init$4() {
   const {
     brandId,
-    config
+    config,
+    testHooks
   } = getStaticData();
+  if (testHooks !== void 0) {
+    const seedDocs = {
+      ...testHooks.firestore?.docs ?? {}
+    };
+    if (testHooks.auth?.profile) {
+      seedDocs.users = {
+        ...seedDocs.users ?? {},
+        [testHooks.auth.uid]: testHooks.auth.profile
+      };
+    }
+    firestoreManager = new MockFirestoreManager(seedDocs);
+    authManager = new MockAuthManager(testHooks.auth ?? null, firestoreManager);
+    logger$d.logDebug("Firebase initialized in MOCK mode (testHooks present)");
+    return;
+  }
   {
     const {
       firebase: sdkFirebaseConfig
@@ -41271,7 +41475,9 @@ async function execApiRequest(params) {
   try {
     response = await fetch(url, options);
   } finally {
-    if (timeoutHandle) clearTimeout(timeoutHandle);
+    if (timeoutHandle) {
+      clearTimeout(timeoutHandle);
+    }
   }
   if (!response.ok) {
     let detail = "";
@@ -41364,7 +41570,7 @@ async function getStyleByExternalId(brandId, externalId) {
   recordCache[cacheKey] = record;
   return record;
 }
-const logger$d = getLogger("product");
+const logger$c = getLogger("product");
 function _init$2() {
   useMainStore.subscribe((state, prevState) => {
     if (state.userHasAvatar && !prevState.userHasAvatar) {
@@ -41397,11 +41603,11 @@ function loadProductDataToStore(externalId) {
     try {
       const productData2 = await loadProductData(externalId);
       useMainStore.getState().setProductData(productData2.externalId, productData2);
-      logger$d.logDebug(`Loaded product data for externalId: ${externalId}`, {
+      logger$c.logDebug(`Loaded product data for externalId: ${externalId}`, {
         productData: productData2
       });
     } catch (error) {
-      logger$d.logError(`Error loading product data for externalId: ${externalId}`, {
+      logger$c.logError(`Error loading product data for externalId: ${externalId}`, {
         error
       });
     }
@@ -41414,9 +41620,9 @@ function loadProductDataToStore(externalId) {
   if (productData[externalId] || !userIsLoggedIn || userHasAvatar === false) {
     return;
   }
-  loadAndStore();
+  void loadAndStore();
 }
-const logger$c = getLogger("style-categories");
+const logger$b = getLogger("style-categories");
 let cached = null;
 let inflight = null;
 function buildIndex(categories, groups) {
@@ -41460,7 +41666,7 @@ async function loadStyleCategoryIndex() {
   }
   inflight = (async () => {
     try {
-      logger$c.logDebug("{{ts}} - Loading style-category index");
+      logger$b.logDebug("{{ts}} - Loading style-category index");
       const [categories, groups] = await Promise.all([getStyleCategories(), getStyleCategoryGroups()]);
       cached = buildIndex(categories, groups);
       return cached;
@@ -41473,12 +41679,12 @@ async function loadStyleCategoryIndex() {
 function peekStyleCategoryIndex() {
   return cached;
 }
-const logger$b = getLogger("fitting-room-data");
+const logger$a = getLogger("fitting-room-data");
 async function loadFittingRoomData() {
   const state = useMainStore.getState();
   const items = state.fittingRoom;
   loadStyleCategoryIndex().catch((error) => {
-    logger$b.logError("Failed to load style-category index", {
+    logger$a.logError("Failed to load style-category index", {
       error
     });
   });
@@ -41490,7 +41696,9 @@ async function loadFittingRoomData() {
   } = getStaticData();
   if (!productLookup) {
     for (const item of items) {
-      if (state.merchantProductData[item.externalId]) continue;
+      if (state.merchantProductData[item.externalId]) {
+        continue;
+      }
       state.setMerchantProductData(item.externalId, {
         error: new Error("No productLookup callback configured")
       });
@@ -41526,7 +41734,7 @@ async function loadFittingRoomData() {
       }
     }
   } catch (error) {
-    logger$b.logError("productLookup batch failed", {
+    logger$a.logError("productLookup batch failed", {
       error,
       handles
     });
@@ -41561,7 +41769,7 @@ function resolveItem(item, merchantSlot, loadedSlot, index) {
     const found = loadedProduct.sizeFitRecommendation.available_sizes.some((sz) => sz.colorway_size_assets.some((csa) => csa.id === item.colorwaySizeAssetId));
     if (!found) {
       needsResize = true;
-      logger$b.logDebug("csa no longer in size rec, marking needsResize", {
+      logger$a.logDebug("csa no longer in size rec, marking needsResize", {
         externalId: item.externalId,
         csa: item.colorwaySizeAssetId
       });
@@ -41611,7 +41819,7 @@ function useResolvedFittingRoom() {
   }, []);
   reactExports.useEffect(() => {
     loadFittingRoomData().catch((error) => {
-      logger$b.logError("loadFittingRoomData failed", {
+      logger$a.logError("loadFittingRoomData failed", {
         error
       });
     });
@@ -41662,12 +41870,14 @@ function buildVtoProductDataFromResolved(item) {
     merchantProduct,
     loadedProduct
   } = item;
-  if (!merchantProduct || !loadedProduct) return null;
+  if (!merchantProduct || !loadedProduct) {
+    return null;
+  }
   const sizeRec = loadedProduct.sizeFitRecommendation;
   const recommendedSizeId = sizeRec.recommended_size.id || null;
   const recommendedSizeLabel = getSizeLabelFromSize(sizeRec.recommended_size);
   if (recommendedSizeId == null || !recommendedSizeLabel) {
-    logger$b.logWarn("Missing recommended size for item", {
+    logger$a.logWarn("Missing recommended size for item", {
       externalId: item.externalId
     });
     return null;
@@ -41675,13 +41885,19 @@ function buildVtoProductDataFromResolved(item) {
   const sizes = [];
   for (const sizeRecord of sizeRec.available_sizes) {
     const sizeLabel = getSizeLabelFromSize(sizeRecord);
-    if (!sizeLabel) continue;
+    if (!sizeLabel) {
+      continue;
+    }
     const fit = sizeRec.fits.find((f) => f.size_id === sizeRecord.id);
-    if (!fit) continue;
+    if (!fit) {
+      continue;
+    }
     const colors = [];
     for (const csa of sizeRecord.colorway_size_assets) {
       const variant = merchantProduct.variants.find((v) => v.sku === csa.sku);
-      if (!variant) continue;
+      if (!variant) {
+        continue;
+      }
       colors.push({
         colorwaySizeAssetId: csa.id,
         colorLabel: variant.color || null,
@@ -41689,7 +41905,9 @@ function buildVtoProductDataFromResolved(item) {
         priceFormatted: variant.priceFormatted
       });
     }
-    if (colors.length === 0) continue;
+    if (colors.length === 0) {
+      continue;
+    }
     sizes.push({
       sizeId: sizeRecord.id,
       sizeLabel,
@@ -41698,7 +41916,9 @@ function buildVtoProductDataFromResolved(item) {
       colors
     });
   }
-  if (sizes.length === 0) return null;
+  if (sizes.length === 0) {
+    return null;
+  }
   return {
     productName: merchantProduct.productName,
     productDescriptionHtml: merchantProduct.productDescriptionHtml,
@@ -41711,12 +41931,16 @@ function buildVtoProductDataFromResolved(item) {
 }
 function findRecommendedColorSize(data, preferredColor) {
   const recommended = data.sizes.find((s) => s.isRecommended);
-  if (!recommended || recommended.colors.length === 0) return null;
+  if (!recommended || recommended.colors.length === 0) {
+    return null;
+  }
   return recommended.colors.find((c) => c.colorLabel === preferredColor) ?? recommended.colors[0];
 }
 function findCsaByLabel(data, sizeLabel, preferredColor) {
   const sizeRecord = data.sizes.find((s) => s.sizeLabel === sizeLabel);
-  if (!sizeRecord || sizeRecord.colors.length === 0) return null;
+  if (!sizeRecord || sizeRecord.colors.length === 0) {
+    return null;
+  }
   return sizeRecord.colors.find((c) => c.colorLabel === preferredColor) ?? sizeRecord.colors[0];
 }
 function useMobileSheetSnap(initial = "collapsed") {
@@ -41726,7 +41950,9 @@ function useMobileSheetSnap(initial = "collapsed") {
     const initialSnap = snap;
     const onTouchMove = (moveEvent) => {
       const deltaY = moveEvent.touches[0].clientY - startY;
-      if (Math.abs(deltaY) < 30) return;
+      if (Math.abs(deltaY) < 30) {
+        return;
+      }
       if (deltaY > 0) {
         if (initialSnap === "full" || initialSnap === "expanded") {
           setSnap("collapsed");
@@ -41755,11 +41981,16 @@ function useMobileSheetSnap(initial = "collapsed") {
 }
 const MAX_OUTFIT_ITEMS = 4;
 function asStringList(value) {
-  if (!Array.isArray(value)) return [];
+  if (!Array.isArray(value)) {
+    return [];
+  }
   const out = [];
   for (const v of value) {
-    if (typeof v === "string") out.push(v);
-    else if (v != null) out.push(String(v));
+    if (typeof v === "string") {
+      out.push(v);
+    } else if (v != null) {
+      out.push(String(v));
+    }
   }
   return out;
 }
@@ -41800,8 +42031,12 @@ function computeAvailability(item, selectedExternalIds, resolved) {
   }
   const itemCat = item.styleCategory;
   for (const sel of resolved.items) {
-    if (!selectedExternalIds.has(sel.externalId)) continue;
-    if (!sel.styleCategory) continue;
+    if (!selectedExternalIds.has(sel.externalId)) {
+      continue;
+    }
+    if (!sel.styleCategory) {
+      continue;
+    }
     if (!pairCompatible(sel.styleCategory, itemCat, sel.styleCategoryGroup)) {
       return "disabled";
     }
@@ -41809,8 +42044,12 @@ function computeAvailability(item, selectedExternalIds, resolved) {
   return "available";
 }
 function makeOutfitItem(r, forceUntuck) {
-  if (!r.styleCategory) return null;
-  if (r.storage.colorwaySizeAssetId == null) return null;
+  if (!r.styleCategory) {
+    return null;
+  }
+  if (r.storage.colorwaySizeAssetId == null) {
+    return null;
+  }
   const tuckable = !!r.styleCategory.tuckable;
   const untucked = forceUntuck && tuckable;
   const layerOrder = untucked ? r.styleCategory.layer_order_untucked : r.styleCategory.layer_order;
@@ -41830,10 +42069,16 @@ function buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExtern
   const entries = [];
   let lastAddedResolved = null;
   for (const r of resolved.items) {
-    if (!selectedExternalIds.has(r.externalId)) continue;
-    if (r.externalId === lastAddedExternalId) lastAddedResolved = r;
+    if (!selectedExternalIds.has(r.externalId)) {
+      continue;
+    }
+    if (r.externalId === lastAddedExternalId) {
+      lastAddedResolved = r;
+    }
     const entry = makeOutfitItem(r, forceUntuck);
-    if (entry) entries.push(entry);
+    if (entry) {
+      entries.push(entry);
+    }
   }
   entries.sort((a, b) => a.layerOrder - b.layerOrder);
   const items = entries.slice(0, MAX_OUTFIT_ITEMS).map((e) => e.outfitItem);
@@ -41844,10 +42089,16 @@ function buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExtern
   };
 }
 function buildAlternateOutfits(primary, lastAddedResolved) {
-  if (!lastAddedResolved || !lastAddedResolved.loadedProduct) return [];
+  if (!lastAddedResolved || !lastAddedResolved.loadedProduct) {
+    return [];
+  }
   const currentCsaId = lastAddedResolved.storage.colorwaySizeAssetId;
-  if (currentCsaId == null) return [];
-  if (!primary.some((i) => i.externalId === lastAddedResolved.externalId)) return [];
+  if (currentCsaId == null) {
+    return [];
+  }
+  if (!primary.some((i) => i.externalId === lastAddedResolved.externalId)) {
+    return [];
+  }
   const sizeRec = lastAddedResolved.loadedProduct.sizeFitRecommendation;
   let currentColorwayId = null;
   for (const sz of sizeRec.available_sizes) {
@@ -41860,7 +42111,9 @@ function buildAlternateOutfits(primary, lastAddedResolved) {
   const out = [];
   for (const sz of sizeRec.available_sizes) {
     const altCsa = sz.colorway_size_assets.find((c) => c.id !== currentCsaId && (currentColorwayId == null || c.colorway_id === currentColorwayId));
-    if (!altCsa) continue;
+    if (!altCsa) {
+      continue;
+    }
     const alternate = primary.map((it) => it.externalId === lastAddedResolved.externalId ? {
       ...it,
       colorwaySizeAssetId: altCsa.id
@@ -41869,6 +42122,24 @@ function buildAlternateOutfits(primary, lastAddedResolved) {
   }
   return out;
 }
+function pillBaseStyle(theme) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "8px 16px",
+    borderRadius: "24px",
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    border: `1px solid ${theme.color_fg_text}`,
+    fontSize: "12px",
+    fontWeight: "500",
+    letterSpacing: "0.5px",
+    textTransform: "uppercase",
+    cursor: "pointer",
+    userSelect: "none",
+    WebkitUserSelect: "none"
+  };
+}
 function AvatarControls({
   selectedItems,
   canTuck,
@@ -41885,7 +42156,9 @@ function AvatarControls({
   const [popoverOpen, setPopoverOpen] = reactExports.useState(false);
   const popoverWrapperRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
-    if (!popoverOpen) return;
+    if (!popoverOpen) {
+      return;
+    }
     const onDocClick = (e) => {
       if (popoverWrapperRef.current && !popoverWrapperRef.current.contains(e.target)) {
         setPopoverOpen(false);
@@ -41908,20 +42181,7 @@ function AvatarControls({
       alignItems: "flex-end"
     },
     pill: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "8px 16px",
-      borderRadius: "24px",
-      backgroundColor: "rgba(255, 255, 255, 0.95)",
-      border: `1px solid ${theme.color_fg_text}`,
-      fontSize: "12px",
-      fontWeight: "500",
-      letterSpacing: "0.5px",
-      textTransform: "uppercase",
-      cursor: "pointer",
-      userSelect: "none",
-      WebkitUserSelect: "none",
+      ...pillBaseStyle(theme),
       transition: "padding 500ms cubic-bezier(0.22, 1, 0.36, 1), gap 500ms cubic-bezier(0.22, 1, 0.36, 1)"
     },
     pillCollapsed: {
@@ -42023,13 +42283,114 @@ function AvatarControls({
     ] })
   ] });
 }
+function MobileTuckControl({
+  canTuck,
+  forceUntuck,
+  onToggleUntuck
+}) {
+  const {
+    t
+  } = useTranslation();
+  const css2 = useCss((theme) => ({
+    wrapper: {
+      position: "absolute",
+      bottom: "12px",
+      right: "12px"
+      // No z-index: the pill sits above the avatar image (later sibling than
+      // the frame viewer) but below the product-details sheet, which is a
+      // later sibling in the try-on view — so the sheet hides the pill when
+      // it expands over the image.
+    },
+    pill: pillBaseStyle(theme),
+    pillIcon: {
+      width: "14px",
+      height: "14px",
+      flex: "none"
+    }
+  }));
+  if (!canTuck) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx$1("div", { css: css2.wrapper, children: /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: onToggleUntuck, children: [
+    /* @__PURE__ */ jsx$1(SvgIconTuck, { css: css2.pillIcon }),
+    /* @__PURE__ */ jsx$1(Text, { variant: "base", children: t(forceUntuck ? "fitting_room.tuck_in" : "fitting_room.untuck") })
+  ] }) });
+}
+const DRAG_STEP_PX = 50;
+function useFrameRotation(frameUrls, setSelectedFrameIndex) {
+  const frameCount = frameUrls?.length ?? 0;
+  const rotateLeft = reactExports.useCallback(() => {
+    setSelectedFrameIndex((prev2) => {
+      if (prev2 == null || frameCount === 0) {
+        return prev2;
+      }
+      return prev2 === 0 ? frameCount - 1 : prev2 - 1;
+    });
+  }, [frameCount, setSelectedFrameIndex]);
+  const rotateRight = reactExports.useCallback(() => {
+    setSelectedFrameIndex((prev2) => {
+      if (prev2 == null || frameCount === 0) {
+        return prev2;
+      }
+      return prev2 === frameCount - 1 ? 0 : prev2 + 1;
+    });
+  }, [frameCount, setSelectedFrameIndex]);
+  const handleMouseDragStart = reactExports.useCallback((e) => {
+    e.preventDefault();
+    let startX = e.clientX;
+    const onMove = (move) => {
+      const deltaX = move.clientX - startX;
+      if (Math.abs(deltaX) >= DRAG_STEP_PX) {
+        if (deltaX > 0) {
+          rotateRight();
+        } else {
+          rotateLeft();
+        }
+        startX = move.clientX;
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, [rotateLeft, rotateRight]);
+  const handleTouchDragStart = reactExports.useCallback((e) => {
+    e.preventDefault();
+    let startX = e.touches[0].clientX;
+    const onMove = (move) => {
+      const deltaX = move.touches[0].clientX - startX;
+      if (Math.abs(deltaX) >= DRAG_STEP_PX) {
+        if (deltaX > 0) {
+          rotateRight();
+        } else {
+          rotateLeft();
+        }
+        startX = move.touches[0].clientX;
+      }
+    };
+    const onEnd = () => {
+      window.removeEventListener("touchmove", onMove);
+      window.removeEventListener("touchend", onEnd);
+    };
+    window.addEventListener("touchmove", onMove);
+    window.addEventListener("touchend", onEnd);
+  }, [rotateLeft, rotateRight]);
+  return {
+    rotateLeft,
+    rotateRight,
+    handleMouseDragStart,
+    handleTouchDragStart
+  };
+}
 function AvatarFrameViewer({
   frameUrls,
   selectedFrameIndex,
   setSelectedFrameIndex,
   imageContainerStyle,
   imageStyle,
-  loadingT = "vto-single.avatar_loading"
+  loadingT = "quick-view.avatar_loading"
 }) {
   const css2 = useCss((_theme) => ({
     imageContainer: {
@@ -42073,59 +42434,17 @@ function AvatarFrameViewer({
     }, 500);
     return () => clearInterval(intervalId);
   }, [frameUrls, selectedFrameIndex, setSelectedFrameIndex]);
-  const rotateLeft = reactExports.useCallback(() => {
-    setSelectedFrameIndex((prevIndex) => {
-      if (prevIndex == null) return null;
-      return prevIndex === 0 ? frameUrls ? frameUrls.length - 1 : 0 : prevIndex - 1;
-    });
-  }, [frameUrls, setSelectedFrameIndex]);
-  const rotateRight = reactExports.useCallback(() => {
-    setSelectedFrameIndex((prevIndex) => {
-      if (prevIndex == null) return null;
-      return prevIndex === (frameUrls ? frameUrls.length - 1 : 0) ? 0 : prevIndex + 1;
-    });
-  }, [frameUrls, setSelectedFrameIndex]);
-  const handleImageMouseDrag = reactExports.useCallback((e) => {
-    e.preventDefault();
-    let startX = e.clientX;
-    const onMouseMove = (moveEvent) => {
-      const deltaX = moveEvent.clientX - startX;
-      if (Math.abs(deltaX) >= 50) {
-        if (deltaX > 0) rotateRight();
-        else rotateLeft();
-        startX = moveEvent.clientX;
-      }
-    };
-    const onMouseUp = () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-    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]);
+  const {
+    rotateLeft,
+    rotateRight,
+    handleMouseDragStart,
+    handleTouchDragStart
+  } = useFrameRotation(frameUrls, setSelectedFrameIndex);
   if (!frameUrls || selectedFrameIndex == null) {
     return /* @__PURE__ */ jsx$1(Loading, { t: loadingT });
   }
   return /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: imageContainerStyle, children: [
-    /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: imageStyle, onMouseDown: handleImageMouseDrag, onTouchStart: handleImageTouchDrag }),
+    /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: imageStyle, onMouseDown: handleMouseDragStart, onTouchStart: handleTouchDragStart }),
     /* @__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 }) })
   ] });
@@ -42134,9 +42453,13 @@ function AvatarPane({
   frameUrls,
   hasSelection,
   controls,
-  mobileFullscreen
+  mobileFullscreen,
+  selectedFrameIndex: indexProp,
+  setSelectedFrameIndex: setIndexProp
 }) {
-  const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
+  const [localFrameIndex, setLocalFrameIndex] = reactExports.useState(null);
+  const selectedFrameIndex = indexProp !== void 0 ? indexProp : localFrameIndex;
+  const setSelectedFrameIndex = setIndexProp ?? setLocalFrameIndex;
   const css2 = useCss((theme) => ({
     container: {
       width: "100%",
@@ -42194,12 +42517,14 @@ function AvatarPane({
     }
   }));
   if (frameUrls && frameUrls.length > 0) {
-    const viewer = /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "vto-single.avatar_loading" });
+    const viewer = /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "quick-view.avatar_loading" });
     if (mobileFullscreen) {
       return /* @__PURE__ */ jsxs("div", { css: css2.mobileContainer, children: [
-        /* @__PURE__ */ jsx$1("div", { css: css2.mobileFrameSlot, children: viewer }),
-        /* @__PURE__ */ jsx$1("div", { css: css2.bottomFiller, children: " " }),
-        controls
+        /* @__PURE__ */ jsxs("div", { css: css2.mobileFrameSlot, children: [
+          viewer,
+          controls
+        ] }),
+        /* @__PURE__ */ jsx$1("div", { css: css2.bottomFiller, children: " " })
       ] });
     }
     return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
@@ -42208,7 +42533,7 @@ function AvatarPane({
     ] });
   }
   if (hasSelection) {
-    return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" }) });
+    return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(Loading, { t: "quick-view.avatar_loading" }) });
   }
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.placeholder, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.avatar_placeholder_empty" }) }),
@@ -42313,7 +42638,9 @@ function ProductCard({
   const disabled = availability === "disabled";
   const selected = availability === "selected";
   const handleClick = () => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     onClick();
   };
   const name2 = item.merchantProduct?.productName ?? item.externalId;
@@ -42359,9 +42686,13 @@ function CardRail({
     setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
   }, []);
   reactExports.useLayoutEffect(() => {
-    if (collapsed) return;
+    if (collapsed) {
+      return;
+    }
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     updateScrollState();
     const observer = new ResizeObserver(updateScrollState);
     observer.observe(el);
@@ -42369,7 +42700,9 @@ function CardRail({
   }, [collapsed, group.items, updateScrollState]);
   const scrollByPage = reactExports.useCallback((dir) => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     el.scrollBy({
       left: dir * el.clientWidth * 0.8,
       behavior: "smooth"
@@ -42462,7 +42795,36 @@ function CardRail({
 function AddToCartButton({
   onClick
 }) {
-  return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "vto-single.add_to_cart", onClick });
+  return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "quick-view.add_to_cart", onClick });
+}
+function ColorSelector({
+  availableColorLabels,
+  selectedColorLabel,
+  onChangeColor
+}) {
+  const css2 = useCss((theme) => ({
+    colorContainer: {},
+    colorLabelText: {
+      fontSize: "12px"
+    },
+    colorSelect: {
+      border: "none",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "12px"
+    }
+  }));
+  const handleColorSelectChange = reactExports.useCallback((e) => {
+    const newColorLabel = e.target.value || null;
+    onChangeColor(newColorLabel);
+  }, [onChangeColor]);
+  if (availableColorLabels.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "quick-view.color_label" }),
+    /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
+  ] }) });
 }
 function ItemFitDetails({
   loadedProductData,
@@ -42574,14 +42936,19 @@ function DetailAccordionItem({
   onToggleOpen,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
   const productData = reactExports.useMemo(() => buildVtoProductDataFromResolved(item), [item]);
   const selectedSizeLabel = reactExports.useMemo(() => {
-    if (!productData) return null;
+    if (!productData) {
+      return null;
+    }
     const csaId = item.storage.colorwaySizeAssetId;
-    if (csaId == null) return null;
+    if (csaId == null) {
+      return null;
+    }
     for (const sizeRec of productData.sizes) {
       if (sizeRec.colors.some((c) => c.colorwaySizeAssetId === csaId)) {
         return sizeRec.sizeLabel;
@@ -42590,22 +42957,38 @@ function DetailAccordionItem({
     return null;
   }, [productData, item.storage.colorwaySizeAssetId]);
   const currentPrice = reactExports.useMemo(() => {
-    if (!productData) return null;
+    if (!productData) {
+      return null;
+    }
     const csaId = item.storage.colorwaySizeAssetId;
-    if (csaId == null) return null;
+    if (csaId == null) {
+      return null;
+    }
     for (const sizeRec of productData.sizes) {
       const c = sizeRec.colors.find((c2) => c2.colorwaySizeAssetId === csaId);
-      if (c) return c.priceFormatted;
+      if (c) {
+        return c.priceFormatted;
+      }
     }
     return null;
   }, [productData, item.storage.colorwaySizeAssetId]);
+  const availableColorLabels = reactExports.useMemo(() => {
+    if (!productData || !selectedSizeLabel) {
+      return [];
+    }
+    const sizeRec = productData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
+    if (!sizeRec) {
+      return [];
+    }
+    return sizeRec.colors.map((c) => c.colorLabel).filter((label) => !!label);
+  }, [productData, selectedSizeLabel]);
   const categoryLabel = item.styleCategory?.label_singular ?? item.styleCategory?.label ?? "";
   const productName = item.merchantProduct?.productName ?? item.externalId;
   const tuckable = !!item.styleCategory?.tuckable && canTuck;
   if (platform === "desktop") {
-    return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, onToggleOpen, onChangeSize, onAddToCart });
+    return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, availableColorLabels, selectedColorLabel: item.storage.color, onToggleOpen, onChangeSize, onChangeColor, onAddToCart });
   }
-  return /* @__PURE__ */ jsx$1(MobileAccordionItem, { isOpen, categoryLabel, productName, productData, selectedSizeLabel, currentPrice, detailMode, isMobileQuickRow, tuckable, forceUntuck, onToggleOpen, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
+  return /* @__PURE__ */ jsx$1(MobileAccordionItem, { isOpen, categoryLabel, productName, productData, selectedSizeLabel, availableColorLabels, selectedColorLabel: item.storage.color, currentPrice, detailMode, isMobileQuickRow, tuckable, forceUntuck, onToggleOpen, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
 function DesktopAccordionItem({
   isOpen,
@@ -42613,8 +42996,11 @@ function DesktopAccordionItem({
   productData,
   currentPrice,
   selectedSizeLabel,
+  availableColorLabels,
+  selectedColorLabel,
   onToggleOpen,
   onChangeSize,
+  onChangeColor,
   onAddToCart
 }) {
   const ACCORDION_SHADE = "#F4F4F4";
@@ -42660,35 +43046,60 @@ function DesktopAccordionItem({
     price: {
       fontSize: "15px"
     },
+    // Padding matches quick-view's sizeRecommendationFrame (32px / 56px) so
+    // the "fit box" feels visually consistent between the two overlays.
+    //
+    // No flex `gap` — the three text lines (recommended size, fit text,
+    // select-a-size prompt) sit tight against each other (matching
+    // quick-view), with explicit marginTop on the size selector + fit
+    // details below them to introduce the larger break.
     sizeBox: {
       width: "100%",
       border: `1px solid ${theme.color_fg_text}`,
-      padding: "20px 24px",
+      padding: "32px 56px",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      gap: "12px",
       marginTop: "8px",
       textAlign: "center"
     },
+    colorSelectorContainer: {
+      width: "100%",
+      marginTop: "8px"
+    },
+    // 14px / line-height 1.5 on these three text lines matches quick-view's
+    // fit-box. Quick-view's first line wraps an InfoIcon button alongside
+    // the recommended-size text, which stretches that line vertically; the
+    // simpler line-height bump here matches the *visual* line spacing
+    // without dragging the icon in. The two lines below it inherit
+    // line-height from their containers in quick-view, which the host page's
+    // body styles tend to set looser than Inter's intrinsic `normal` (~1.21).
     recommendedSize: {
-      fontSize: "13px",
-      fontWeight: "600"
+      fontSize: "14px",
+      fontWeight: "600",
+      lineHeight: 1.5
     },
     selectPrompt: {
-      fontSize: "12px"
+      fontSize: "14px",
+      lineHeight: 1.5
     },
     fitText: {
-      fontSize: "12px"
+      fontSize: "14px",
+      lineHeight: 1.5,
+      // Tight 8px lift to the recommended-size line above; matches
+      // quick-view's `itemFitContainer` marginTop.
+      marginTop: "8px"
     },
     fitDetails: {
-      width: "100%"
+      width: "100%",
+      marginTop: "24px"
     },
     sizeRow: {
       display: "flex",
       gap: "8px",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      marginTop: "24px"
     },
     cartContainer: {
       width: "100%",
@@ -42709,6 +43120,7 @@ function DesktopAccordionItem({
     !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productName, children: productData.productName }),
       currentPrice ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.price, children: currentPrice }) : null,
+      /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
       /* @__PURE__ */ jsxs("div", { css: css2.sizeBox, children: [
         /* @__PURE__ */ jsxs(Text, { variant: "base", css: css2.recommendedSize, children: [
           "Recommended Size: ",
@@ -42732,6 +43144,8 @@ function MobileAccordionItem({
   productName,
   productData,
   selectedSizeLabel,
+  availableColorLabels,
+  selectedColorLabel,
   currentPrice,
   detailMode,
   isMobileQuickRow,
@@ -42740,6 +43154,7 @@ function MobileAccordionItem({
   onToggleOpen,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -42879,6 +43294,7 @@ function MobileAccordionItem({
     ] }),
     isMobileQuickRow ? /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.quickRow, children: productData ? /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) : null }) }) : !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx$1("div", { css: css2.sizeRow, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) }),
+      /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }),
       /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData: productData }),
       /* @__PURE__ */ jsx$1("div", { css: css2.fitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData: productData, selectedSizeLabel }) }),
       /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
@@ -42905,6 +43321,7 @@ function DetailAccordion({
   onOpenItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -42919,9 +43336,164 @@ function DetailAccordion({
     gap
   }, children: items.map((item) => {
     const isOpen = openItemExternalId === item.externalId;
-    return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, canTuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
+    return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, canTuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onChangeColor: (label) => onChangeColor(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
   }) });
 }
+const AXIS_LOCK_PX = 8;
+const ROTATE_STEP_PX = 50;
+function ZoomModal({
+  frameUrls,
+  selectedFrameIndex,
+  setSelectedFrameIndex,
+  onClose
+}) {
+  reactExports.useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [onClose]);
+  const {
+    rotateLeft,
+    rotateRight
+  } = useFrameRotation(frameUrls, setSelectedFrameIndex);
+  const scrollAreaRef = reactExports.useRef(null);
+  const handleImageMouseDown = reactExports.useCallback((e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const scrollArea = scrollAreaRef.current;
+    const startScrollTop = scrollArea?.scrollTop ?? 0;
+    let mode = "unknown";
+    let lastRotateX = startX;
+    const onMove = (move) => {
+      const deltaX = move.clientX - startX;
+      const deltaY = move.clientY - startY;
+      if (mode === "unknown") {
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+        if (absX < AXIS_LOCK_PX && absY < AXIS_LOCK_PX) {
+          return;
+        }
+        mode = absY > absX ? "scroll" : "rotate";
+        lastRotateX = move.clientX;
+      }
+      if (mode === "scroll" && scrollArea) {
+        scrollArea.scrollTop = startScrollTop - deltaY;
+      } else if (mode === "rotate") {
+        const rotateDelta = move.clientX - lastRotateX;
+        if (Math.abs(rotateDelta) >= ROTATE_STEP_PX) {
+          if (rotateDelta > 0) {
+            rotateRight();
+          } else {
+            rotateLeft();
+          }
+          lastRotateX = move.clientX;
+        }
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, [rotateLeft, rotateRight]);
+  const css2 = useCss((_theme) => ({
+    backdrop: {
+      position: "fixed",
+      inset: 0,
+      backgroundColor: "#F4F4F4",
+      zIndex: 100
+    },
+    scrollArea: {
+      position: "absolute",
+      // 40px padding on every side.
+      inset: "40px",
+      overflow: "auto"
+    },
+    // Centres the frame when it fits; grows past the scroll area when it
+    // doesn't, so the scroll area scrolls instead of shrinking the image.
+    imageWrap: {
+      minWidth: "100%",
+      minHeight: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    image: {
+      // No sizing — the frame renders at its natural (full) resolution.
+      display: "block",
+      flex: "none",
+      cursor: "grab"
+    },
+    // Rotation chevrons float at the modal's vertical centre, so they stay
+    // put regardless of how the (possibly larger) frame is scrolled.
+    chevron: {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "flex",
+      cursor: "pointer",
+      zIndex: 1
+    },
+    chevronLeft: {
+      left: "8px"
+    },
+    chevronRight: {
+      right: "8px"
+    },
+    chevronIcon: {
+      width: "48px",
+      height: "48px"
+    },
+    close: {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      width: "44px",
+      height: "44px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "50%",
+      border: "none",
+      // Reset native button chrome and default padding so the circle renders
+      // exactly as styled.
+      appearance: "none",
+      WebkitAppearance: "none",
+      padding: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      color: "#FFFFFF",
+      fontSize: "32px",
+      lineHeight: 1,
+      cursor: "pointer",
+      // Keep the "×" glyph from being text-selected — a stray selection
+      // paints a dark highlight rectangle behind it.
+      userSelect: "none",
+      WebkitUserSelect: "none",
+      zIndex: 1
+    }
+  }));
+  const imageUrl = frameUrls[selectedFrameIndex ?? 0];
+  return /* @__PURE__ */ jsxs("div", { css: css2.backdrop, children: [
+    /* @__PURE__ */ jsx$1("div", { ref: scrollAreaRef, css: css2.scrollArea, children: /* @__PURE__ */ jsx$1("div", { css: css2.imageWrap, children: /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.image, alt: "", onMouseDown: handleImageMouseDown }) }) }),
+    /* @__PURE__ */ jsx$1("div", { css: /* @__PURE__ */ css$1({
+      ...css2.chevron,
+      ...css2.chevronLeft
+    }, "", ""), onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
+    /* @__PURE__ */ jsx$1("div", { css: /* @__PURE__ */ css$1({
+      ...css2.chevron,
+      ...css2.chevronRight
+    }, "", ""), onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) }),
+    /* @__PURE__ */ jsx$1("button", { css: css2.close, onClick: onClose, "aria-label": "Close zoom", children: "×" })
+  ] });
+}
 const AVATAR_ASPECT_RATIO = 2 / 3;
 const EDGE_INSET_PX = 16;
 const AVATAR_MIN_WIDTH_PX = 240;
@@ -42937,35 +43509,40 @@ function DesktopLayout$1({
   detailMode,
   forceUntuck,
   canTuck,
-  zoomed,
   frameUrls,
   onSelectItem,
   onRemoveItem,
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck,
-  onToggleZoom,
   onSignOut
 }) {
   const hasSelection = selectedItems.length > 0;
   const [avatarHovered, setAvatarHovered] = reactExports.useState(false);
+  const [zoomOpen, setZoomOpen] = reactExports.useState(false);
+  const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
   const containerRef = reactExports.useRef(null);
   const [avatarWidth, setAvatarWidth] = reactExports.useState(AVATAR_MIN_WIDTH_PX);
   reactExports.useLayoutEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     const observer = new ResizeObserver(() => {
       const availableHeightPx = el.clientHeight;
-      if (availableHeightPx <= 0) return;
+      if (availableHeightPx <= 0) {
+        return;
+      }
       const target = Math.floor(availableHeightPx * AVATAR_ASPECT_RATIO);
       setAvatarWidth(Math.min(AVATAR_MAX_WIDTH_PX, Math.max(AVATAR_MIN_WIDTH_PX, target)));
     });
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  const gridTemplateColumns = zoomed ? "1fr" : hasSelection ? `${avatarWidth}px minmax(${DETAILS_MIN_WIDTH_PX}px, ${DETAILS_FR}fr) ${CARDS_FR}fr` : `${avatarWidth}px 1fr`;
+  const gridTemplateColumns = hasSelection ? `${avatarWidth}px minmax(${DETAILS_MIN_WIDTH_PX}px, ${DETAILS_FR}fr) ${CARDS_FR}fr` : `${avatarWidth}px 1fr`;
   const css2 = useCss((_theme) => ({
     container: {
       display: "grid",
@@ -43030,21 +43607,127 @@ function DesktopLayout$1({
       fontSize: "14px"
     }
   }));
-  const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, canTuck, forceUntuck, zoomed, expanded: avatarHovered, onToggleUntuck, onToggleZoom, onRemoveItem }) : null;
+  const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, canTuck, forceUntuck, zoomed: zoomOpen, expanded: avatarHovered, onToggleUntuck, onToggleZoom: () => setZoomOpen(true), onRemoveItem }) : null;
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, css: css2.container, style: {
     gridTemplateColumns
   }, children: [
-    /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, onMouseEnter: () => setAvatarHovered(true), onMouseLeave: () => setAvatarHovered(false), children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls }) }),
-    !zoomed && hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) }) : null,
-    !zoomed ? /* @__PURE__ */ jsxs("div", { css: css2.railsColumn, children: [
+    /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, onMouseEnter: () => setAvatarHovered(true), onMouseLeave: () => setAvatarHovered(false), children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls, selectedFrameIndex, setSelectedFrameIndex }) }),
+    hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck }) }) : null,
+    /* @__PURE__ */ jsxs("div", { css: css2.railsColumn, children: [
       /* @__PURE__ */ jsxs("span", { css: css2.signOutWrapper, onClick: onSignOut, children: [
         /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.signOutIcon }),
         /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOut, t: "fitting_room.sign_out" })
       ] }),
       resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name))
-    ] }) : null
+    ] }),
+    zoomOpen && frameUrls && frameUrls.length > 0 ? /* @__PURE__ */ jsx$1(ZoomModal, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, onClose: () => setZoomOpen(false) }) : null
+  ] });
+}
+function MenuIcon({
+  size = 20
+}) {
+  return /* @__PURE__ */ jsx$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx$1("path", { d: "M4 7H20M4 12H20M4 17H20", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function SectionNav({
+  sections,
+  activeName,
+  onSelect
+}) {
+  const [open, setOpen] = reactExports.useState(false);
+  const wrapperRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDocClick = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [open]);
+  const handleSelect = reactExports.useCallback((name2) => {
+    setOpen(false);
+    onSelect(name2);
+  }, [onSelect]);
+  const css2 = useCss((theme) => ({
+    wrapper: {
+      // Floats over the card rails at the top-right instead of taking its own
+      // row in the browse-view column (BrowseView's container is relative).
+      position: "absolute",
+      top: "12px",
+      right: "16px",
+      // Above the rails so the pill and its drop-down sit over the content.
+      zIndex: 5
+    },
+    bar: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "6px 16px",
+      borderRadius: "999px",
+      backgroundColor: theme.color_fg_text,
+      color: "#FFFFFF",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "13px",
+      fontWeight: "500",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      whiteSpace: "nowrap"
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      flex: "none"
+    },
+    dropdown: {
+      position: "absolute",
+      top: "calc(100% + 6px)",
+      right: 0,
+      // At least as wide as the pill, growing to fit the longest label.
+      minWidth: "100%",
+      backgroundColor: theme.color_fg_text,
+      borderRadius: "16px",
+      maxHeight: "60vh",
+      overflowY: "auto",
+      boxShadow: "0 6px 16px rgba(0, 0, 0, 0.25)"
+    },
+    item: {
+      display: "block",
+      width: "100%",
+      textAlign: "left",
+      whiteSpace: "nowrap",
+      padding: "8px 18px",
+      backgroundColor: "transparent",
+      color: "#FFFFFF",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "13px",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      "&:not(:first-of-type)": {
+        borderTop: "1px solid rgba(255, 255, 255, 0.12)"
+      }
+    },
+    itemActive: {
+      backgroundColor: "rgba(255, 255, 255, 0.16)"
+    }
+  }));
+  const activeLabel = sections.find((s) => s.name === activeName)?.label ?? sections[0]?.label ?? "";
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, css: css2.wrapper, children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.bar, onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsx$1("span", { children: activeLabel }),
+      /* @__PURE__ */ jsx$1("span", { css: css2.icon, children: open ? /* @__PURE__ */ jsx$1(Chevron, { direction: "up", size: 20 }) : /* @__PURE__ */ jsx$1(MenuIcon, { size: 20 }) })
+    ] }),
+    open ? /* @__PURE__ */ jsx$1("div", { css: css2.dropdown, children: sections.map((s) => /* @__PURE__ */ jsx$1(Button, { variant: "base", css: s.name === activeName ? {
+      ...css2.item,
+      ...css2.itemActive
+    } : css2.item, onClick: () => handleSelect(s.name), children: s.label }, s.name)) }) : null
   ] });
 }
+const SECTION_SCROLL_TOP_GAP_PX = 50;
 function MobileLayout$1({
   mode,
   resolved,
@@ -43064,13 +43747,14 @@ function MobileLayout$1({
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
   if (mode === "browse") {
     return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn });
   }
-  return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
+  return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
 function BrowseView({
   resolved,
@@ -43080,12 +43764,55 @@ function BrowseView({
   onRemoveItem,
   onTryItOn
 }) {
+  const railsAreaRef = reactExports.useRef(null);
+  const sectionRefs = reactExports.useRef(/* @__PURE__ */ new Map());
+  const [activeSectionName, setActiveSectionName] = reactExports.useState(null);
+  const sections = resolved.groups.map((g) => ({
+    name: g.group.name,
+    label: g.group.label
+  }));
+  const recomputeActiveSection = reactExports.useCallback(() => {
+    const container = railsAreaRef.current;
+    if (!container) {
+      return;
+    }
+    const containerTop = container.getBoundingClientRect().top;
+    let active = null;
+    for (const [name2, el] of sectionRefs.current) {
+      if (el.getBoundingClientRect().top >= containerTop - 1) {
+        active = name2;
+        break;
+      }
+    }
+    if (active == null) {
+      const groups = resolved.groups;
+      active = groups.length > 0 ? groups[groups.length - 1].group.name : null;
+    }
+    setActiveSectionName(active);
+  }, [resolved.groups]);
+  reactExports.useLayoutEffect(() => {
+    recomputeActiveSection();
+  }, [recomputeActiveSection, resolved.groups]);
+  const scrollToSection = reactExports.useCallback((name2) => {
+    const container = railsAreaRef.current;
+    const el = sectionRefs.current.get(name2);
+    if (!container || !el) {
+      return;
+    }
+    const delta = el.getBoundingClientRect().top - container.getBoundingClientRect().top;
+    container.scrollBy({
+      top: delta - SECTION_SCROLL_TOP_GAP_PX,
+      behavior: "smooth"
+    });
+  }, []);
   const css2 = useCss((_theme) => ({
     container: {
       display: "flex",
       flexDirection: "column",
       height: "100%",
-      width: "100%"
+      width: "100%",
+      // Positioning context for the floating SectionNav pill.
+      position: "relative"
     },
     railsArea: {
       flex: 1,
@@ -43103,7 +43830,14 @@ function BrowseView({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
-    /* @__PURE__ */ jsx$1("div", { css: css2.railsArea, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name)) }),
+    !resolved.isLoading && resolved.groups.length > 0 ? /* @__PURE__ */ jsx$1(SectionNav, { sections, activeName: activeSectionName, onSelect: scrollToSection }) : null,
+    /* @__PURE__ */ jsx$1("div", { ref: railsAreaRef, css: css2.railsArea, onScroll: recomputeActiveSection, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1("div", { ref: (el) => {
+      if (el) {
+        sectionRefs.current.set(group.group.name, el);
+      } else {
+        sectionRefs.current.delete(group.group.name);
+      }
+    }, children: /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }) }, group.group.name)) }),
     resolved.groups.length > 0 ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomBar, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "fitting_room.try_it_on", onClick: onTryItOn, disabled: selectedCount === 0 }) }) : null
   ] });
 }
@@ -43120,6 +43854,7 @@ function TryOnView({
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -43129,8 +43864,14 @@ function TryOnView({
   reactExports.useEffect(() => {
     function refresh() {
       const el = innerRef.current;
-      if (!el) return;
-      const maxHeightPx = Number(window.getComputedStyle(el.parentElement).getPropertyValue("max-height").replace("px", ""));
+      if (!el) {
+        return;
+      }
+      const parentEl = el.parentElement;
+      if (!parentEl) {
+        return;
+      }
+      const maxHeightPx = Number(window.getComputedStyle(parentEl).getPropertyValue("max-height").replace("px", ""));
       const heightPx = Math.min(el.clientHeight, maxHeightPx || el.clientHeight);
       setSheetStyle({
         height: `${heightPx}px`
@@ -43166,7 +43907,7 @@ function TryOnView({
     },
     sheetOuter: {
       position: "absolute",
-      // 8px gap to either side, matching vto-single's mobile sheet.
+      // 8px gap to either side, matching quick-view's mobile sheet.
       left: "8px",
       right: "8px",
       bottom: 0,
@@ -43207,18 +43948,18 @@ function TryOnView({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
-    /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls, mobileFullscreen: true }),
+    /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls, mobileFullscreen: true, controls: /* @__PURE__ */ jsx$1(MobileTuckControl, { canTuck, forceUntuck, onToggleUntuck }) }),
     /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.backButton, onClick: onBackToBrowse, "aria-label": "Back to browse", children: /* @__PURE__ */ jsx$1(SvgIconLeftArrow, { css: css2.backArrow }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.sheetOuter, style: sheetStyle, children: /* @__PURE__ */ jsxs("div", { ref: innerRef, css: css2.sheetInner, style: sheetStyle, children: [
       /* @__PURE__ */ jsxs("div", { css: css2.sheetHandleRow, onTouchStart: sheetTouchStart, children: [
         /* @__PURE__ */ jsx$1(SvgDragHandle, {}),
         /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.sheetTitle, children: "RECOMMENDED SIZES" })
       ] }),
-      sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) })
+      sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck }) })
     ] }) })
   ] });
 }
-const logger$a = getLogger("use-vto-requests");
+const logger$9 = getLogger("use-vto-requests");
 function outfitKey(items) {
   return items.map((i) => `${i.colorway_size_asset_id}:${i.untucked ? 1 : 0}`).sort().join("|");
 }
@@ -43230,18 +43971,22 @@ function useVtoRequests() {
   const [lastError, setLastError] = reactExports.useState(null);
   const clearError = reactExports.useCallback(() => setLastError(null), []);
   const request = reactExports.useCallback((items, priority) => {
-    if (items.length === 0) return;
+    if (items.length === 0) {
+      return;
+    }
     const key = outfitKey(items);
-    if (requestedKeysRef.current.has(key)) return;
+    if (requestedKeysRef.current.has(key)) {
+      return;
+    }
     const exec = () => {
       requestedKeysRef.current.add(key);
-      logger$a.logDebug("Requesting VTO composition", {
+      logger$9.logDebug("Requesting VTO composition", {
         key,
         items,
         priority
       });
       requestVto(items).then((resp) => {
-        logger$a.logDebug("VTO frames ready", {
+        logger$9.logDebug("VTO frames ready", {
           key,
           count: resp.frames.length
         });
@@ -43250,7 +43995,7 @@ function useVtoRequests() {
           [key]: resp.frames
         }));
       }).catch((error) => {
-        logger$a.logError("VTO request failed", {
+        logger$9.logError("VTO request failed", {
           error,
           items,
           key
@@ -43260,7 +44005,9 @@ function useVtoRequests() {
       });
     };
     if (priority) {
-      for (const timer of pendingPrefetchTimersRef.current) clearTimeout(timer);
+      for (const timer of pendingPrefetchTimersRef.current) {
+        clearTimeout(timer);
+      }
       pendingPrefetchTimersRef.current.clear();
       lastPriorityTimeRef.current = Date.now();
       exec();
@@ -43271,7 +44018,9 @@ function useVtoRequests() {
     if (last) {
       const now = Date.now();
       const minNext = last + getStaticData().config.api.vtoPrefetchDelayMs;
-      if (now < minNext) delay = minNext - now;
+      if (now < minNext) {
+        delay = minNext - now;
+      }
     }
     if (delay > 0) {
       const timer = setTimeout(() => {
@@ -43286,15 +44035,21 @@ function useVtoRequests() {
   reactExports.useEffect(() => {
     const timers = pendingPrefetchTimersRef.current;
     return () => {
-      for (const timer of timers) clearTimeout(timer);
+      for (const timer of timers) {
+        clearTimeout(timer);
+      }
       timers.clear();
     };
   }, []);
   const framesForOutfit = reactExports.useCallback((items) => {
-    if (items.length === 0) return null;
+    if (items.length === 0) {
+      return null;
+    }
     const key = outfitKey(items);
     const frames = framesByKey[key];
-    if (!frames || frames.length === 0) return null;
+    if (!frames || frames.length === 0) {
+      return null;
+    }
     const baseUrl2 = getStaticData().config.frames.baseUrl;
     return frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
   }, [framesByKey]);
@@ -43313,12 +44068,14 @@ function toWireItems(items) {
     } : {}
   }));
 }
-const logger$9 = getLogger("overlays/fitting-room");
+const logger$8 = getLogger("overlays/fitting-room");
 function measureTopOffset() {
   const {
     getOverlayTopOffset
   } = getStaticData();
-  if (!getOverlayTopOffset) return 0;
+  if (!getOverlayTopOffset) {
+    return 0;
+  }
   try {
     const offset = getOverlayTopOffset();
     return Number.isFinite(offset) && offset > 0 ? offset : 0;
@@ -43326,7 +44083,9 @@ function measureTopOffset() {
     return 0;
   }
 }
-function FittingRoomOverlay() {
+function FittingRoomOverlay({
+  preselectExternalId
+}) {
   const deviceLayout = useMainStore((state) => state.deviceLayout);
   const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
   const userHasAvatar = useMainStore((state) => state.userHasAvatar);
@@ -43342,7 +44101,6 @@ function FittingRoomOverlay() {
   const [forceUntuck, setForceUntuck] = reactExports.useState(false);
   const [lastAddedExternalId, setLastAddedExternalId] = reactExports.useState(null);
   const [mobileMode, setMobileMode] = reactExports.useState("browse");
-  const [zoomed, setZoomed] = reactExports.useState(false);
   const {
     snap: sheetSnap,
     setSnap: setSheetSnap,
@@ -43357,13 +44115,17 @@ function FittingRoomOverlay() {
   } = useVtoRequests();
   reactExports.useEffect(() => {
     const savedScrollY = window.scrollY;
-    if (savedScrollY > 0) window.scrollTo(0, 0);
+    if (savedScrollY > 0) {
+      window.scrollTo(0, 0);
+    }
     setTopOffset(measureTopOffset());
     const onResize = () => setTopOffset(measureTopOffset());
     window.addEventListener("resize", onResize);
     return () => {
       window.removeEventListener("resize", onResize);
-      if (savedScrollY > 0) window.scrollTo(0, savedScrollY);
+      if (savedScrollY > 0) {
+        window.scrollTo(0, savedScrollY);
+      }
     };
   }, []);
   const selectedItems = reactExports.useMemo(() => {
@@ -43376,14 +44138,22 @@ function FittingRoomOverlay() {
     indexed.sort((a, b) => {
       const aOrder = a.item.styleCategoryGroup?.display_order ?? Number.MAX_SAFE_INTEGER;
       const bOrder = b.item.styleCategoryGroup?.display_order ?? Number.MAX_SAFE_INTEGER;
-      if (aOrder !== bOrder) return aOrder - bOrder;
+      if (aOrder !== bOrder) {
+        return aOrder - bOrder;
+      }
       return a.idx - b.idx;
     });
     return indexed.map(({
       item
     }) => item);
   }, [resolved.items, selectedExternalIds]);
-  const canTuck = reactExports.useMemo(() => selectedItems.some((top) => !!top.styleCategory?.tuckable && selectedItems.some((other) => !!other.styleCategory && !other.styleCategory.tuckable && other.styleCategory.layer_order > top.styleCategory.layer_order)), [selectedItems]);
+  const canTuck = reactExports.useMemo(() => selectedItems.some((top) => {
+    const topCategory = top.styleCategory;
+    if (!topCategory?.tuckable) {
+      return false;
+    }
+    return selectedItems.some((other) => !!other.styleCategory && !other.styleCategory.tuckable && other.styleCategory.layer_order > topCategory.layer_order);
+  }), [selectedItems]);
   const availabilityByExternalId = reactExports.useMemo(() => {
     const out = {};
     for (const item of resolved.items) {
@@ -43392,11 +44162,17 @@ function FittingRoomOverlay() {
     return out;
   }, [resolved, selectedExternalIds]);
   const ensureSizeForItem = reactExports.useCallback((item) => {
-    if (item.storage.colorwaySizeAssetId != null) return;
+    if (item.storage.colorwaySizeAssetId != null) {
+      return;
+    }
     const productData = buildVtoProductDataFromResolved(item);
-    if (!productData) return;
+    if (!productData) {
+      return;
+    }
     const csa = findRecommendedColorSize(productData, item.storage.color);
-    if (!csa) return;
+    if (!csa) {
+      return;
+    }
     const sizeRec = item.loadedProduct?.sizeFitRecommendation;
     const sizeLabel = sizeRec ? getSizeLabelFromSize(sizeRec.recommended_size) : productData.recommendedSizeLabel;
     updateFittingRoomItem(item.externalId, {
@@ -43404,7 +44180,7 @@ function FittingRoomOverlay() {
       size: sizeLabel,
       color: csa.colorLabel
     });
-    logger$9.logDebug("Auto-picked recommended size", {
+    logger$8.logDebug("Auto-picked recommended size", {
       externalId: item.externalId,
       sizeLabel,
       csaId: csa.colorwaySizeAssetId
@@ -43412,12 +44188,16 @@ function FittingRoomOverlay() {
   }, [updateFittingRoomItem]);
   const handleSelectItem = reactExports.useCallback((externalId) => {
     const item = resolved.items.find((i) => i.externalId === externalId);
-    if (!item) return;
+    if (!item) {
+      return;
+    }
     const isSelected = selectedExternalIds.has(externalId);
     const nextSelected = new Set(selectedExternalIds);
     if (isSelected) {
       nextSelected.delete(externalId);
-      if (openAccordionItemId === externalId) setOpenAccordionItemId(null);
+      if (openAccordionItemId === externalId) {
+        setOpenAccordionItemId(null);
+      }
     } else {
       nextSelected.add(externalId);
       ensureSizeForItem(item);
@@ -43431,30 +44211,55 @@ function FittingRoomOverlay() {
   }, [resolved, selectedExternalIds, openAccordionItemId, isMobileLayout, ensureSizeForItem]);
   const handleChangeSize = reactExports.useCallback((externalId, sizeLabel) => {
     const item = resolved.items.find((i) => i.externalId === externalId);
-    if (!item) return;
+    if (!item) {
+      return;
+    }
     const productData = buildVtoProductDataFromResolved(item);
-    if (!productData) return;
+    if (!productData) {
+      return;
+    }
     const csa = findCsaByLabel(productData, sizeLabel, item.storage.color);
-    if (!csa) return;
+    if (!csa) {
+      return;
+    }
     updateFittingRoomItem(externalId, {
       colorwaySizeAssetId: csa.colorwaySizeAssetId,
       size: sizeLabel,
       color: csa.colorLabel
     });
   }, [resolved.items, updateFittingRoomItem]);
+  const handleChangeColor = reactExports.useCallback((externalId, colorLabel) => {
+    const item = resolved.items.find((i) => i.externalId === externalId);
+    if (!item || !item.storage.size) {
+      return;
+    }
+    const productData = buildVtoProductDataFromResolved(item);
+    if (!productData) {
+      return;
+    }
+    const csa = findCsaByLabel(productData, item.storage.size, colorLabel);
+    if (!csa) {
+      return;
+    }
+    updateFittingRoomItem(externalId, {
+      colorwaySizeAssetId: csa.colorwaySizeAssetId,
+      size: item.storage.size,
+      color: csa.colorLabel
+    });
+  }, [resolved.items, updateFittingRoomItem]);
   const handleAddToCart = reactExports.useCallback(async (externalId) => {
     const {
       addToCart
     } = getStaticData();
     if (!addToCart) {
-      logger$9.logWarn("No addToCart callback configured; skipping", {
+      logger$8.logWarn("No addToCart callback configured; skipping", {
         externalId
       });
       return;
     }
     const item = resolved.items.find((i) => i.externalId === externalId);
     if (!item || !item.storage.size || !item.storage.color) {
-      logger$9.logWarn("Cannot add to cart: missing size or color", {
+      logger$8.logWarn("Cannot add to cart: missing size or color", {
         externalId,
         size: item?.storage.size,
         color: item?.storage.color
@@ -43468,7 +44273,7 @@ function FittingRoomOverlay() {
       });
       closeOverlay();
     } catch (error) {
-      logger$9.logError("addToCart failed", {
+      logger$8.logError("addToCart failed", {
         error,
         externalId
       });
@@ -43477,17 +44282,18 @@ function FittingRoomOverlay() {
   const handleToggleUntuck = reactExports.useCallback(() => {
     setForceUntuck((prev2) => !prev2);
   }, []);
-  const handleToggleZoom = reactExports.useCallback(() => {
-    setZoomed((prev2) => !prev2);
-  }, []);
   const handleRemoveItem = reactExports.useCallback((externalId) => {
     setSelectedExternalIds((prev2) => {
-      if (!prev2.has(externalId)) return prev2;
+      if (!prev2.has(externalId)) {
+        return prev2;
+      }
       const next2 = new Set(prev2);
       next2.delete(externalId);
       return next2;
     });
-    if (openAccordionItemId === externalId) setOpenAccordionItemId(null);
+    if (openAccordionItemId === externalId) {
+      setOpenAccordionItemId(null);
+    }
   }, [openAccordionItemId]);
   const handleTryItOn = reactExports.useCallback(() => {
     setMobileMode("try-on");
@@ -43501,10 +44307,25 @@ function FittingRoomOverlay() {
       setOpenAccordionItemId(null);
     }
   }, [openAccordionItemId, selectedExternalIds]);
+  const preselectAppliedRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (preselectAppliedRef.current || !preselectExternalId) {
+      return;
+    }
+    if (!resolved.items.some((i) => i.externalId === preselectExternalId)) {
+      return;
+    }
+    preselectAppliedRef.current = true;
+    handleSelectItem(preselectExternalId);
+  }, [preselectExternalId, resolved.items, handleSelectItem]);
   const outfit = reactExports.useMemo(() => buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExternalId), [selectedExternalIds, resolved, forceUntuck, lastAddedExternalId]);
   reactExports.useEffect(() => {
-    if (!userIsLoggedIn || !userHasAvatar) return;
-    if (outfit.items.length === 0) return;
+    if (!userIsLoggedIn || !userHasAvatar) {
+      return;
+    }
+    if (outfit.items.length === 0) {
+      return;
+    }
     requestVtoComposition(toWireItems(outfit.items), true);
     if (getStaticData().config.features.vtoPrefetch) {
       for (const alt of outfit.alternates) {
@@ -43515,7 +44336,9 @@ function FittingRoomOverlay() {
   const frameUrls = reactExports.useMemo(() => {
     if (outfit.items.length === 0) {
       const bareFrames = userProfile?.avatar_frames;
-      if (!bareFrames || bareFrames.length === 0) return null;
+      if (!bareFrames || bareFrames.length === 0) {
+        return null;
+      }
       const baseUrl2 = getStaticData().config.frames.baseUrl;
       return bareFrames.map((u) => applyFrameBaseUrl(u, baseUrl2));
     }
@@ -43539,7 +44362,7 @@ function FittingRoomOverlay() {
     closeOverlay();
     const authManager2 = getAuthManager();
     authManager2.logout().catch((error) => {
-      logger$9.logError("Error during logout", {
+      logger$8.logError("Error during logout", {
         error
       });
     });
@@ -43586,29 +44409,6 @@ function FittingRoomOverlay() {
       fontSize: "13px",
       textDecoration: "underline",
       marginTop: "8px"
-    },
-    snackbar: {
-      position: "absolute",
-      left: "50%",
-      bottom: "24px",
-      transform: "translateX(-50%)",
-      padding: "12px 20px",
-      borderRadius: "24px",
-      backgroundColor: theme.color_fg_text,
-      color: "#FFFFFF",
-      fontSize: "13px",
-      display: "flex",
-      alignItems: "center",
-      gap: "12px",
-      zIndex: 10,
-      maxWidth: "calc(100% - 32px)"
-    },
-    snackbarDismiss: {
-      background: "none",
-      border: "none",
-      color: "#FFFFFF",
-      fontSize: "16px",
-      cursor: "pointer"
     }
   }));
   const isMobileTryOn = isMobileLayout && mobileMode === "try-on";
@@ -43639,15 +44439,12 @@ function FittingRoomOverlay() {
       /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.emptyTagline, t: "landing.description" }),
       /* @__PURE__ */ jsx$1("div", { css: css2.emptyShopNow, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "primary", t: "fitting_room.shop_now", onClick: handleShopNow }) }),
       userIsLoggedIn ? /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.emptySignOut, t: "fitting_room.sign_out", onClick: handleSignOut }) : null
-    ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, zoomed, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onToggleZoom: handleToggleZoom, onSignOut: handleSignOut }),
-    vtoError ? /* @__PURE__ */ jsxs("div", { css: css2.snackbar, children: [
-      /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.vto_error" }),
-      /* @__PURE__ */ jsx$1("button", { css: css2.snackbarDismiss, onClick: clearVtoError, "aria-label": "Dismiss", children: "×" })
-    ] }) : null
+    ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onChangeColor: handleChangeColor, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onChangeColor: handleChangeColor, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onSignOut: handleSignOut }),
+    vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "fitting_room.vto_error", onDismiss: clearVtoError }) : null
   ] }) });
 }
 const CONTACT_US_LINK = "mailto:info@thefittingroom.tech?subject=Forgot%20Password%20Assistance";
-const logger$8 = getLogger("forgot-password");
+const logger$7 = getLogger("forgot-password");
 function ForgotPasswordOverlay({
   returnToOverlay
 }) {
@@ -43713,7 +44510,7 @@ function ForgotPasswordOverlay({
         await authManager2.sendPasswordResetEmail(email2);
         setLinkSent(true);
       } catch (error) {
-        logger$8.logError("Error sending password reset email:", {
+        logger$7.logError("Error sending password reset email:", {
           error
         });
       }
@@ -43731,7 +44528,7 @@ function ForgotPasswordOverlay({
       return;
     }
     const email = emailEl.value;
-    resetUserPassword(email);
+    void resetUserPassword(email);
   }, [t]);
   const handleBackToSignInClick = reactExports.useCallback(() => {
     openOverlay(OverlayName.SIGN_IN, {
@@ -43932,7 +44729,7 @@ function TfrTitle() {
   }));
   return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.nameIcon }) });
 }
-const logger$7 = getLogger("sign-in");
+const logger$6 = getLogger("sign-in");
 function SignInOverlay({
   returnToOverlay
 }) {
@@ -44006,7 +44803,7 @@ function SignInOverlay({
           closeOverlay();
         }
       } catch (error) {
-        logger$7.logError("Login failed:", {
+        logger$6.logError("Login failed:", {
           error
         });
         setEmailError(" ");
@@ -44038,7 +44835,7 @@ function SignInOverlay({
     }
     const email = emailEl.value;
     const password = passwordEl.value;
-    loginUser(email, password);
+    void loginUser(email, password);
   }, [returnToOverlay, closeOverlay, openOverlay, t]);
   const handleForgotPasswordClick = reactExports.useCallback(() => {
     openOverlay(OverlayName.FORGOT_PASSWORD, {
@@ -44369,8 +45166,8 @@ function FitChart({
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
 const AVATAR_GUTTER_HEIGHT_PX = 100;
 const CONTENT_AREA_WIDTH_PX = 550;
-const logger$6 = getLogger("overlays/vto-single");
-function VtoSingleOverlay() {
+const logger$5 = getLogger("overlays/quick-view");
+function QuickViewOverlay() {
   const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
   const userHasAvatar = useMainStore((state) => state.userHasAvatar);
   const userProfile = useMainStore((state) => state.userProfile);
@@ -44384,18 +45181,20 @@ function VtoSingleOverlay() {
   const [modalStyle, setModalStyle] = reactExports.useState({});
   const {
     request: vtoRequest,
-    framesForOutfit
+    framesForOutfit,
+    lastError: vtoError,
+    clearError: clearVtoError
   } = useVtoRequests();
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
       openOverlay(OverlayName.LANDING, {
-        returnToOverlay: OverlayName.VTO_SINGLE
+        returnToOverlay: OverlayName.QUICK_VIEW
       });
       return;
     }
     if (userIsLoggedIn && userHasAvatar === false) {
       openOverlay(OverlayName.GET_APP, {
-        returnToOverlay: OverlayName.VTO_SINGLE,
+        returnToOverlay: OverlayName.QUICK_VIEW,
         noAvatar: true
       });
       return;
@@ -44434,7 +45233,9 @@ function VtoSingleOverlay() {
         const {
           color: selectedColor
         } = await currentProduct.getSelectedOptions();
-        const styleCategoryLabel = storeProduct.style.style_category_label || null;
+        const styleCategoryIndex = await loadStyleCategoryIndex();
+        const styleCategoryGroup = styleCategoryIndex.groupForCategory(storeProduct.style.style_category_name);
+        const styleCategoryLabel = styleCategoryGroup?.label ?? null;
         const sizeRecommendationRecord = storeProduct.sizeFitRecommendation;
         {
           const recommendedSizeId = sizeRecommendationRecord.recommended_size.id || null;
@@ -44463,7 +45264,7 @@ function VtoSingleOverlay() {
                 const sku = csaRec.sku;
                 const variant = variants.find((v) => v.sku === sku);
                 if (!variant) {
-                  logger$6.logWarn(`Variant not found for externalId: ${currentProduct.externalId} sizeId: ${sizeId} sku: ${sku}`);
+                  logger$5.logWarn(`Variant not found for externalId: ${currentProduct.externalId} sizeId: ${sizeId} sku: ${sku}`);
                   continue;
                 }
                 const colorLabel = variant.color || null;
@@ -44476,7 +45277,7 @@ function VtoSingleOverlay() {
                 });
               }
               if (!colors.length) {
-                logger$6.logWarn(`No valid colorways found for externalId: ${currentProduct.externalId} sizeId: ${sizeId}`);
+                logger$5.logWarn(`No valid colorways found for externalId: ${currentProduct.externalId} sizeId: ${sizeId}`);
                 continue;
               }
               sizes.push({
@@ -44519,7 +45320,7 @@ function VtoSingleOverlay() {
           setSelectedColorLabel(recommendedColorLabel);
         }
       } catch (error) {
-        logger$6.logError("Error fetching initial data:", {
+        logger$5.logError("Error fetching initial data:", {
           error
         });
         setVtoProductData(false);
@@ -44530,7 +45331,7 @@ function VtoSingleOverlay() {
     if (vtoProductData !== null) {
       return;
     }
-    setupInitialVtoData();
+    void setupInitialVtoData();
   }, [storeProductData, vtoProductData, userProfile]);
   const {
     sizeColorRecord: selectedColorSizeRecord,
@@ -44592,7 +45393,7 @@ function VtoSingleOverlay() {
     if (!rewritten) {
       return null;
     }
-    logger$6.logDebug(`{{ts}} - Displaying VTO for sku: ${selectedColorSizeRecord.sku}`);
+    logger$5.logDebug(`{{ts}} - Displaying VTO for sku: ${selectedColorSizeRecord.sku}`);
     rewritten.forEach((url) => {
       const img = new Image();
       img.src = url;
@@ -44603,7 +45404,7 @@ function VtoSingleOverlay() {
     closeOverlay();
     const authManager2 = getAuthManager();
     authManager2.logout().catch((error) => {
-      logger$6.logError("Error during logout:", {
+      logger$5.logError("Error during logout:", {
         error
       });
     });
@@ -44625,7 +45426,7 @@ function VtoSingleOverlay() {
         color: selectedColorLabel
       });
     } catch (error) {
-      logger$6.logError("Error adding to cart:", {
+      logger$5.logError("Error adding to cart:", {
         error
       });
     }
@@ -44642,7 +45443,10 @@ function VtoSingleOverlay() {
   } else {
     Layout = DesktopLayout;
   }
-  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
+  return /* @__PURE__ */ jsxs(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: [
+    /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }),
+    vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "quick-view.vto_error", onDismiss: clearVtoError }) : null
+  ] });
 }
 function NoFitLayout({
   onClose,
@@ -44674,14 +45478,59 @@ function NoFitLayout({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
-    /* @__PURE__ */ jsx$1("div", { css: css2.titlebarContainer, children: /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("try_it_on"), onCloseClick: onClose }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.titlebarContainer, children: /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("quick-view.title"), onCloseClick: onClose }) }),
     /* @__PURE__ */ jsxs("div", { css: css2.contentContainer, children: [
       /* @__PURE__ */ jsx$1("div", { children: " " }),
-      /* @__PURE__ */ jsx$1("div", { css: css2.messageContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.no_recommendation" }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.messageContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "quick-view.no_recommendation" }) }),
       /* @__PURE__ */ jsx$1("div", { css: css2.footerContainer, children: /* @__PURE__ */ jsx$1(Footer, { onSignOutClick: onSignOut }) })
     ] })
   ] });
 }
+function FittingRoomToggleButton() {
+  const {
+    currentProduct
+  } = getStaticData();
+  const productId = currentProduct?.externalId ?? null;
+  const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
+  const css2 = useCss((theme) => ({
+    button: {
+      marginTop: "10px",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      padding: "13px",
+      backgroundColor: "#FFFFFF",
+      border: `1px solid ${theme.color_fg_text}`,
+      borderRadius: "30px",
+      cursor: "pointer"
+    },
+    icon: {
+      color: theme.color_fg_text,
+      width: "20px",
+      height: "20px"
+    },
+    text: {
+      fontSize: "14px",
+      textTransform: "uppercase"
+    }
+  }));
+  if (productId == null) {
+    return null;
+  }
+  const handleClick = () => {
+    toggleFittingRoomItem(productId, currentProduct?.handle ?? null, true).catch((error) => {
+      logger$5.logError("toggleFittingRoomItem failed", {
+        error
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, children: [
+    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room" })
+  ] });
+}
 function MobileLayout({
   loadedProductData,
   selectedColorSizeRecord,
@@ -44787,7 +45636,11 @@ function MobileLayout({
       if (!bottomFrameInnerEl) {
         return;
       }
-      const maxHeightPx = Number(window.getComputedStyle(bottomFrameInnerEl.parentElement).getPropertyValue("max-height").replace("px", ""));
+      const parentEl = bottomFrameInnerEl.parentElement;
+      if (!parentEl) {
+        return;
+      }
+      const maxHeightPx = Number(window.getComputedStyle(parentEl).getPropertyValue("max-height").replace("px", ""));
       const heightPx = Math.min(bottomFrameInnerEl.clientHeight, maxHeightPx);
       const bottomFrameStyle = {
         height: `${heightPx}px`
@@ -44892,8 +45745,11 @@ function MobileContentExpanded({
     /* @__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 }) })
+    /* @__PURE__ */ jsxs("div", { css: css2.buttonContainer, children: [
+      /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }),
+      /* @__PURE__ */ jsx$1(FittingRoomToggleButton, {})
+    ] }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.productDetailsContainer, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.productDetailsText, t: "quick-view.view_product_details", onClick: handleProductDetailsClick }) })
   ] });
 }
 function MobileContentFull({
@@ -44988,8 +45844,11 @@ function MobileContentFull({
     ] }),
     fitChartNode,
     /* @__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__ */ jsxs("div", { css: css2.buttonContainer, children: [
+      /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }),
+      /* @__PURE__ */ jsx$1(FittingRoomToggleButton, {})
+    ] }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.productDetailsContainer, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.productDetailsText, t: "quick-view.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 }) })
@@ -45105,7 +45964,7 @@ function DesktopLayout({
   return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
     /* @__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__ */ jsx$1(ModalTitlebar, { title: t("quick-view.title"), 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 }) }),
@@ -45121,7 +45980,10 @@ function DesktopLayout({
           /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
         ] }),
         fitChartNode,
-        /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
+        /* @__PURE__ */ jsxs("div", { css: css2.buttonContainer, children: [
+          /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }),
+          /* @__PURE__ */ jsx$1(FittingRoomToggleButton, {})
+        ] }),
         /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(ProductDescriptionText, { loadedProductData }) })
       ] }),
       /* @__PURE__ */ jsx$1(Footer, { onSignOutClick: onSignOut })
@@ -45141,10 +46003,37 @@ function Avatar({
     bottomContainerStyle: {}
   });
   const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
+  const [zoomOpen, setZoomOpen] = reactExports.useState(false);
   const css2 = useCss((theme) => ({
     topContainer: {
       flex: "none",
-      height: "100%"
+      height: "100%",
+      // Positioning context for the zoom pill overlaid on the avatar.
+      position: "relative"
+    },
+    zoomPill: {
+      position: "absolute",
+      // Bottom-right of the avatar image, clear of the slider gutter below it.
+      bottom: `${AVATAR_GUTTER_HEIGHT_PX + 16}px`,
+      right: "16px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "8px 16px",
+      borderRadius: "24px",
+      backgroundColor: "rgba(255, 255, 255, 0.95)",
+      border: `1px solid ${theme.color_fg_text}`,
+      fontSize: "12px",
+      fontWeight: "500",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      cursor: "pointer",
+      zIndex: 2
+    },
+    zoomPillIcon: {
+      width: "14px",
+      height: "14px",
+      flex: "none"
     },
     bottomContainer: {
       position: "absolute",
@@ -45258,10 +46147,15 @@ function Avatar({
   }, [isMobileLayout]);
   const isReady = !!frameUrls && selectedFrameIndex != null;
   return /* @__PURE__ */ jsxs("div", { css: css2.topContainer, style: layoutData.topContainerStyle, children: [
-    /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: layoutData.imageContainerStyle, imageStyle: layoutData.imageStyle, loadingT: "vto-single.avatar_loading" }),
-    isReady ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: layoutData.imageContainerStyle, imageStyle: layoutData.imageStyle, loadingT: "quick-view.avatar_loading" }),
+    isReady && !isMobileLayout ? /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.zoomPill, onClick: () => setZoomOpen(true), children: [
+      /* @__PURE__ */ jsx$1(SvgIconZoom, { css: css2.zoomPillIcon }),
+      /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "quick-view.zoom_in" })
+    ] }) : null,
+    zoomOpen && frameUrls && frameUrls.length > 0 ? /* @__PURE__ */ jsx$1(ZoomModal, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, onClose: () => setZoomOpen(false) }) : null,
+    frameUrls && selectedFrameIndex != null ? /* @__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 })
+      /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "quick-view.slide_to_rotate", css: css2.sliderText })
     ] }) }) : null
   ] });
 }
@@ -45291,35 +46185,6 @@ function ProductSummaryRow({
     /* @__PURE__ */ jsx$1("div", { css: css2.nameContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.nameText, children: loadedProductData.productName }) })
   ] });
 }
-function ColorSelector({
-  availableColorLabels,
-  selectedColorLabel,
-  onChangeColor
-}) {
-  const css2 = useCss((theme) => ({
-    colorContainer: {},
-    colorLabelText: {
-      fontSize: "12px"
-    },
-    colorSelect: {
-      border: "none",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "12px"
-    }
-  }));
-  const handleColorSelectChange = reactExports.useCallback((e) => {
-    const newColorLabel = e.target.value || null;
-    onChangeColor(newColorLabel);
-  }, []);
-  if (availableColorLabels.length < 2) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
-    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "vto-single.color_label" }),
-    /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
-  ] }) });
-}
 function RecommendedSizeText({
   loadedProductData,
   textCss
@@ -45363,11 +46228,11 @@ function Footer({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
-    /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOutLink, onClick: onSignOutClick, t: "vto-single.sign_out" }),
+    /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOutLink, onClick: onSignOutClick, t: "quick-view.sign_out" }),
     /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.tfrIcon })
   ] });
 }
-const logger$5 = getLogger("widgets/add-to-fitting-room-compact");
+const logger$4 = getLogger("widgets/add-to-fitting-room-compact");
 function AddToFittingRoomCompactWidget({
   attributes
 }) {
@@ -45413,7 +46278,7 @@ function AddToFittingRoomCompactWidget({
   }
   const handleClick = () => {
     toggleFittingRoomItem(productId, productHandle, isPdp).catch((error) => {
-      logger$5.logError("toggleFittingRoomItem failed", {
+      logger$4.logError("toggleFittingRoomItem failed", {
         error
       });
     });
@@ -45421,64 +46286,8 @@ function AddToFittingRoomCompactWidget({
   const ariaLabel = t(isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room");
   return /* @__PURE__ */ jsx$1("button", { type: "button", onClick: handleClick, css: [css2.button, isInFittingRoom && css2.buttonAdded, "", ""], "aria-label": ariaLabel, "aria-pressed": isInFittingRoom, children: /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: [css2.icon, isInFittingRoom && css2.iconAdded, "", ""] }) });
 }
-const logger$4 = getLogger("widgets/add-to-fitting-room");
-function AddToFittingRoomWidget({
-  attributes
-}) {
-  const {
-    currentProduct
-  } = getStaticData();
-  const attrProductId = attributes["product-id"];
-  const attrProductHandle = attributes["product-handle"];
-  const productId = attrProductId || currentProduct?.externalId || null;
-  const isPdp = productId != null && productId === currentProduct?.externalId;
-  const productHandle = attrProductHandle || (isPdp ? currentProduct?.handle ?? null : null);
-  const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
-  const css2 = useCss((theme) => ({
-    button: {
-      marginTop: "10px",
-      marginBottom: "10px",
-      width: "100%",
-      maxWidth: "440px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "10px",
-      padding: "13px",
-      backgroundColor: "white",
-      borderWidth: "1px",
-      borderColor: theme.color_fg_text,
-      borderStyle: "solid",
-      borderRadius: "30px",
-      cursor: "pointer"
-    },
-    icon: {
-      color: theme.color_fg_text,
-      width: "20px",
-      height: "20px"
-    },
-    text: {
-      fontSize: "14px",
-      textTransform: "uppercase"
-    }
-  }));
-  if (productId == null) {
-    return null;
-  }
-  const handleClick = () => {
-    toggleFittingRoomItem(productId, productHandle, isPdp).catch((error) => {
-      logger$4.logError("toggleFittingRoomItem failed", {
-        error
-      });
-    });
-  };
-  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, children: [
-    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
-    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room" })
-  ] });
-}
 const logger$3 = getLogger("widgets/fitting-room-icon");
-function FittingRoomIconWidget({}) {
+function FittingRoomIconWidget(_props) {
   const {
     t
   } = useTranslation();
@@ -45540,7 +46349,7 @@ function FittingRoomIconWidget({}) {
   ] });
 }
 const logger$2 = getLogger("widgets/fitting-room");
-function FittingRoomWidget({}) {
+function FittingRoomWidget(_props) {
   const count = useMainStore((state) => state.fittingRoom.length);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const css2 = useCss((theme) => ({
@@ -45597,11 +46406,11 @@ function FittingRoomWidget({}) {
   ] });
 }
 const logger$1 = getLogger("size-rec");
-function SizeRecWidget({}) {
+function SizeRecWidget(_props) {
   const openOverlay = useMainStore((state) => state.openOverlay);
   const openedOverlays = useMainStore((state) => state.openedOverlays);
   const storeProductData = useMainStore((state) => state.productData);
-  const hasOpenedVtoSingleOverlay = openedOverlays.includes(OverlayName.VTO_SINGLE);
+  const hasOpenedQuickViewOverlay = openedOverlays.includes(OverlayName.QUICK_VIEW);
   const sizeRecommendationRecord = reactExports.useMemo(() => {
     const {
       currentProduct
@@ -45625,9 +46434,9 @@ function SizeRecWidget({}) {
     return productData.sizeFitRecommendation || null;
   }, [storeProductData]);
   const handleLinkClick = reactExports.useCallback(() => {
-    openOverlay(OverlayName.VTO_SINGLE);
+    openOverlay(OverlayName.QUICK_VIEW);
   }, [openOverlay]);
-  if (!sizeRecommendationRecord || !hasOpenedVtoSingleOverlay) {
+  if (!sizeRecommendationRecord || !hasOpenedQuickViewOverlay) {
     return null;
   }
   const sizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size);
@@ -45639,8 +46448,11 @@ function SizeRecWidget({}) {
   } });
 }
 const logger = getLogger("widgets/vto-button");
-function VtoButtonWidget({}) {
+function VtoButtonWidget(_props) {
   const openOverlay = useMainStore((state) => state.openOverlay);
+  const currentProduct = getStaticData().currentProduct ?? null;
+  const currentProductId = currentProduct?.externalId ?? null;
+  const hasOtherFittingRoomItems = useMainStore((state) => state.fittingRoom.some((item) => item.externalId !== currentProductId));
   const css2 = useCss((theme) => ({
     button: {
       marginTop: "10px",
@@ -45667,13 +46479,29 @@ function VtoButtonWidget({}) {
       textTransform: "uppercase"
     }
   }));
-  const openVto = () => {
-    logger.logDebug("{{ts}} - Opening VTO overlay");
-    openOverlay(OverlayName.VTO_SINGLE);
+  const handleClick = () => {
+    if (!hasOtherFittingRoomItems) {
+      logger.logDebug("{{ts}} - Opening quick-view overlay");
+      openOverlay(OverlayName.QUICK_VIEW);
+      return;
+    }
+    logger.logDebug("{{ts}} - Opening fitting-room overlay");
+    if (!currentProductId) {
+      openOverlay(OverlayName.FITTING_ROOM);
+      return;
+    }
+    ensureFittingRoomItem(currentProductId, currentProduct?.handle ?? null, true).catch((error) => {
+      logger.logError("Failed to add current product to fitting room", {
+        error
+      });
+    });
+    openOverlay(OverlayName.FITTING_ROOM, {
+      preselectExternalId: currentProductId
+    });
   };
-  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: openVto, css: css2.button, children: [
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, children: [
     /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.icon }),
-    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: "try_it_on" })
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: hasOtherFittingRoomItems ? "try_it_on" : "quick-view.title" })
   ] });
 }
 var DeviceLayout = /* @__PURE__ */ ((DeviceLayout2) => {
@@ -45738,10 +46566,6 @@ function _init$1() {
   });
 }
 const WIDGETS = {
-  [
-    "add-to-fitting-room"
-    /* ADD_TO_FITTING_ROOM */
-  ]: AddToFittingRoomWidget,
   [
     "add-to-fitting-room-compact"
     /* ADD_TO_FITTING_ROOM_COMPACT */
@@ -45769,7 +46593,7 @@ var OverlayName = /* @__PURE__ */ ((OverlayName2) => {
   OverlayName2["GET_APP"] = "get-app";
   OverlayName2["LANDING"] = "landing";
   OverlayName2["SIGN_IN"] = "sign-in";
-  OverlayName2["VTO_SINGLE"] = "vto-single";
+  OverlayName2["QUICK_VIEW"] = "quick-view";
   return OverlayName2;
 })(OverlayName || {});
 const OVERLAYS = {
@@ -45794,9 +46618,9 @@ const OVERLAYS = {
     /* SIGN_IN */
   ]: SignInOverlay,
   [
-    "vto-single"
-    /* VTO_SINGLE */
-  ]: VtoSingleOverlay
+    "quick-view"
+    /* QUICK_VIEW */
+  ]: QuickViewOverlay
 };
 let staticData = null;
 function _init(initStaticData) {
@@ -45941,9 +46765,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.23"}`,
-    commitHash: `${"ab793d5"}`,
-    date: `${"2026-05-19T13:40:12.965Z"}`
+    version: `${"5.0.25"}`,
+    commitHash: `${"101d833"}`,
+    date: `${"2026-05-22T00:57:54.147Z"}`
   }
 };
 const CONFIGS = {
@@ -46067,7 +46891,7 @@ const CONFIGS = {
 const getConfig = (envName) => {
   return CONFIGS[envName];
 };
-const css = "body.tfr-modal-open {\n  overflow: hidden;\n  position: fixed;\n  width: 100%;\n}\n";
+const css = "\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n/* Inter — the SDK's own typeface, matching the Figma designs. Loaded here so\n   overlay text renders in Inter regardless of the host page's fonts. */\nbody.tfr-modal-open {\n  overflow: hidden;\n  position: fixed;\n  width: 100%;\n}\n";
 class TfrWidgetElement extends HTMLElement {
   connectedCallback() {
     const attributes = this.getAttributeNames().reduce((attrs, name2) => {
@@ -46090,7 +46914,8 @@ async function init(initParams) {
       debug,
       productLookup,
       getOverlayTopOffset,
-      addToCart
+      addToCart,
+      testHooks
     } = initParams;
     if (!brandId || typeof brandId !== "number" || isNaN(brandId) || brandId <= 0) {
       throw new Error(`Invalid brandId "${brandId}"`);
@@ -46116,7 +46941,8 @@ async function init(initParams) {
       config,
       productLookup: productLookup ?? null,
       getOverlayTopOffset: getOverlayTopOffset ?? null,
-      addToCart: addToCart ?? null
+      addToCart: addToCart ?? null,
+      testHooks
     });
     _init$7();
     _init$5();