diff --git a/src/app/features/project-editor/sections/features-section.component.html b/src/app/features/project-editor/sections/features-section.component.html
index 53e87fd..ff3feb2 100644
--- a/src/app/features/project-editor/sections/features-section.component.html
+++ b/src/app/features/project-editor/sections/features-section.component.html
@@ -1,8 +1,8 @@
 @if (bootstrap(); as bootstrap) {
 <app-section-card [title]="'builder.marketplaceFeatures' | translate">
   <div class="editor-grid three toggles">
-    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.wishlist" (ngModelChange)="toggleFeature('wishlist', $event)" [ariaLabel]="'builder.showWishlist' | translate" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
-    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.compare" (ngModelChange)="toggleFeature('compare', $event)" [ariaLabel]="'builder.showCompare' | translate" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.wishlist" (ngModelChange)="toggleFeatureAndUserExperience('wishlist', $event)" [ariaLabel]="'builder.showWishlist' | translate" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.compare" (ngModelChange)="toggleFeatureAndUserExperience('compare', $event)" [ariaLabel]="'builder.showCompare' | translate" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.reviews" (ngModelChange)="toggleFeature('reviews', $event)" [ariaLabel]="'builder.reviews' | translate" /><span>{{ 'builder.reviews' | translate }}</span><small class="field-desc">{{ 'builder.reviewsFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="bootstrap.productPage?.questions?.enabled !== false" (ngModelChange)="toggleProductFeature('questions', $event)" [ariaLabel]="'builder.questions' | translate" /><span>{{ 'builder.questions' | translate }}</span><small class="field-desc">{{ 'builder.questionsFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="!!bootstrap.featureFlags.comments" (ngModelChange)="toggleFeature('comments', $event)" [ariaLabel]="'builder.comments' | translate" /><span>{{ 'builder.comments' | translate }}</span><small class="field-desc">{{ 'builder.commentsFeatureDesc' | translate }}</small></label>
diff --git a/src/app/features/project-editor/sections/features-section.component.ts b/src/app/features/project-editor/sections/features-section.component.ts
index e0c25ab..254d8c2 100644
--- a/src/app/features/project-editor/sections/features-section.component.ts
+++ b/src/app/features/project-editor/sections/features-section.component.ts
@@ -45,6 +45,25 @@ export class ProjectEditorFeaturesSectionComponent {
     this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } }));
   }
 
+  /**
+   * Wishlist/compare visibility is gated by featureFlags AND
+   * userExperience.<key>.enabled at runtime (see FeatureConfigService).
+   * The editor only exposes one toggle per feature, so it must keep both
+   * flags in sync - otherwise a stray userExperience.<key>.enabled=false
+   * (e.g. from an older export) leaves the toggle looking "on" with no way
+   * to fix it from this screen.
+   */
+  toggleFeatureAndUserExperience(key: 'wishlist' | 'compare', checked: boolean): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      featureFlags: { ...current.featureFlags, [key]: checked },
+      userExperience: {
+        ...current.userExperience,
+        [key]: { ...current.userExperience?.[key], enabled: checked }
+      }
+    }));
+  }
+
   toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void {
     this.facade.updateBootstrap(current => ({
       ...current,